A Good Red

24/02/2015 8:06am

A good red is worth finding be it wine for your table or in this case, text for your website.

Red text is used for lots of things including highlighting new items, warnings, reminders of missing entries and asterisks to show that information is required (more on that use another time).

The red we see used most is pure red (Hex = #FF0000, RGB = 255, 0, 0) but it can be problematic when it comes to passing colour contrast requirements.  It all depends on the text size and the colour of its background.

Text size itself is open to interpretation. Do you define large and small text by ems or by point size?  We are going to go with this statement from WCAG 2.0 Contrast (Minimum): Understanding SC 1.4.3

“18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio”.

In the table below there are three different values of red.  The first is pure red which fails contrast on white at the AA level for small text but is OK for large. The second is a slightly darker red (#EE0000) which passes on a white background at the AA level for both small and large text. The third is a deeper red (#B60000) which passes at the AAA level.

Colour swatch

Text

Ratio with white

Hex

RGB

WCAG pass

Pure red example

Pure red background with white text as an example of poor contrast.

Pure red text example

An example of 12 point and 16 point font size in pure red on a white background

4.0:1

#FF0000

255, 0, 0

Passes AA for large text but not for small

Darker red example

Darker red background with white text passes level AA

Darker red text example

An example of 12 point and 16 point font size in a darker red on a white background

4.53:1

#EE0000

238, 0, 0

Passes AA

Deep red example

Deep red background with white text passes level AAA.

Deep red text example

An example of 12 point and 16 point font size in a deep red on a white background

7.03:1

#B60000

182, 0, 0

Passes AAA

The background of your red text can also affect whether or not it will pass contrast so once you’ve found your great red, give it something to go with that will not spoil its great finish.