Colour contrast in your website design is very important for how users perceive information. You can often find websites or landing pages where the background and text lack proper contrast; as a result readability suffers and visitors want to leave the page as soon as possible. This is especially acute for people with visual impairments.
If you care about high conversion, always think not only about usability and SEO when building a site, but also about colour contrast. It is an important factor that must not be ignored.
What the tool does
Here is a convenient and simple online service for checking colour contrast. It is based on determining a font/background contrast that is acceptable for people with vision problems, including colour-blind people, and for low-quality monitors.
WCAG 1: brightness and colour
The first method (W3C guidance from the WCAG 1.0 era) compares two numbers:
- Brightness difference — brightness is (R·299 + G·587 + B·114) / 1000; optimal is 125 or more.
- Colour difference — the sum of differences in the R, G and B channels; optimal is 500 or more.
For example, grey #777777 on white has a brightness difference of 136 (fine) but a colour difference of only 408 (below 500).
WCAG 2: contrast ratio
The modern WCAG 2 standard uses the ratio of the relative luminance of the lighter and darker colours: from 1:1 (identical colours) to 21:1 (black on white).
| Level | Normal text | Large text (18pt+ or 14pt bold) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Level AA is the required minimum for most sites and accessibility requirements (including legal ones); AAA is enhanced.
Examples
| Text | Background | Contrast | Result |
|---|---|---|---|
#000000 | #FFFFFF | 21:1 | maximum, AAA |
#595959 | #FFFFFF | 7.00:1 | AAA for normal text |
#767676 | #FFFFFF | 4.54:1 | AA for normal text |
#777777 | #FFFFFF | 4.48:1 | fails AA, large text only |
#FF0000 | #FFFFFF | 4.00:1 | large text only (AA) |
#949494 | #FFFFFF | 3.03:1 | borderline for large text |
Note that the popular grey #777 on white falls just short of AA, while the slightly darker #767676 passes.
Where it helps
- choosing colours for body text, links and buttons in a layout;
- checking grey captions, placeholders and text on coloured and photo backgrounds;
- dark themes — it is just as easy to make text too pale there;
- accessibility audits and preparing for WCAG requirements.
How to use the page
Enter the colours in hexadecimal format or pick a colour from the palette and instantly get a preview of the combination and information about their compatibility: brightness and colour difference, contrast ratio and WCAG 2 AA and AAA conformance. This free tool will be a great helper in your daily work and will help you avoid common mistakes when designing a website.