Phone: +61 (08) 9206 3987

Mobile: +61 0415 383 673

Search Website

A Good Red

by Web Key IT

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”.

You may also need to consider pixel sizes.  As a guide 18 point (pt) font is equivalent to 24 pixels (px) and 14 pt bold text is equivalent to 19 px bold

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 text example

4.0:1

#FF0000

255, 0, 0

Passes AA for large text but not for small

Darker red example

Darker red text example

 

4.53:1

#EE0000

238, 0, 0

Passes AA

Deep red example

Deep red text example

 

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.