How to use contrast well in your brand
Contrast is the difference in brightness between text and what's behind it. When it's low, text is hard to read: on a screen in the sun, on a phone with the brightness turned all the way down, or for anyone with low vision. That's why the WCAG accessibility guidelines set a measurable minimum.
What AA and AAA mean
- AA, normal text: 4.5 to 1. The recommended minimum for paragraphs, menus, buttons and forms.
- AA, large text: 3 to 1. Applies to headings of 24 px or larger, or 18.66 px or larger in bold.
- AAA: 7 to 1 and 4.5 to 1. The strictest level. Worth aiming for in long-form text.
- Icons and field borders: 3 to 1. Graphic elements needed to understand or use something also need contrast.
Contrast and brand colors
Many brands have a main color that works great as a background and poorly as text, like yellows and light blues. The fix isn't changing the brand: it's defining in the brand guidelines which combinations are for text and which are only for backgrounds, shapes or accents. Two or three darker or lighter variants of the same color are usually enough.
What the number doesn't measure
Contrast ratio doesn't account for font weight, actual on-screen size or color blindness. A very thin typeface needs more than the minimum contrast. And never use color alone to convey something, like a form error: pair it with text or an icon.
Frequently asked questions
How is contrast ratio calculated?
The relative luminance of the two colors is compared using the WCAG formula: (the lighter one + 0.05) divided by (the darker one + 0.05). The result ranges from 1 to 1 (same color) to 21 to 1 (black on white).
What level do I need to meet?
For most sites, level AA: 4.5 to 1 for normal text and 3 to 1 for large text. It's the level required by accessibility laws and standards in many countries.
Does it work with transparent colors?
No. Use the final color you see on screen, with the transparency already applied over the background. You can grab it with the eyedropper in your browser or your design software.
Do you store the colors I test?
No. The calculation happens in your browser and nothing is sent.
Answers from the AiDo Creative team