Color Contrast Checker
Check the WCAG 2.x contrast ratio between text and background colours with AA and AAA pass/fail results.
Runs in your browserTwo colours → Contrast report
Loading tool…
How to use the Color Contrast Checker
- Paste or type your Two colours into the input area, or open a file from your device.
- Adjust the options above the editor if the tool offers any.
- Review the Contrast report result, then copy it or download it as a file.
Privacy and limitations
- Your data is processed on your device and is not uploaded to any server.
Frequently asked questions
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and UI components. AAA needs 7:1 and 4.5:1.
How are transparent text colours handled?
A translucent foreground is blended over the background before the ratio is calculated, as a browser would draw it.
Related converters
Color PickerPick a colour visually or paste any colour value and copy it as HEX, RGB, HSL, HSV, CMYK or its CSS name.Color Shades GeneratorGenerate evenly spaced tints (mixed with white) and shades (mixed with black) of a base colour.HEX to Color Name FinderFind the exact or nearest CSS colour name for any hex, RGB or HSL colour using perceptual (CIELAB) distance.Color Name to HEX ConverterLook up the hex code of any of the 148 CSS named colours, from aliceblue to yellowgreen.CMYK to HEX ConverterConvert CMYK percentages from print specifications to hex colour codes for the web.HEX to CMYK ConverterConvert web hex colour codes to CMYK percentages as a starting point for print artwork.CMYK to RGB ConverterConvert CMYK print percentages (cyan, magenta, yellow, key) to RGB values for screens.RGB to CMYK ConverterConvert RGB colours to CMYK percentages for print using the standard device-independent formula.