Contrast Checker
Check your text to background contrast Ratio >>
Find colours that match your brand, and also that pass global standards in contrast ratios to ensure the best readability across your site.
Try a colour pair. If it fails the standards on contrast ratios, explore different hues, saturation and lightness to find a pair that works and still fits your preferred branding palette.
Once you have one or more pairs you like, take a note of them to pass to your website builder.
For more ideas on palette making, see the Colour Palette Lab
Enter 3 or 6 HEX digits, for example #2C5B5C.
Enter 3 or 6 HEX digits, for example #F9FFF4.
A little contrast. A clearer story.
Good contrast makes your words easier to read. Try your own text and colours.
An example link ↗What do these results mean?
The higher the ratio X in X;Y, the more contrast exists between the two colours.
This tool checks solid text and background colours using the WCAG 2.x contrast formula; it does not
assess gradients, images, transparency or the accessibility of a whole page.
AA is the usual WCAG text-contrast target:
At least 4.5:1 for body text
At least 3:1 for large text.
Large means at least 24 CSS pixels, or about 18.67 CSS pixels when bold.
AAA asks for
7:1 for body text
4.5:1 for large text.
A pair may work for a large heading but fail for smaller copy.
Font weight, size and spacing also affect how comfortable words feel to read.