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.