Color Contrast Checker
Test text and background colours against WCAG 2.2.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Calculates the WCAG contrast ratio for a text and background pair and states whether it passes AA and AAA at normal and large sizes. A live sample shows how the combination actually reads.
How to use it
- Set the text colour and the background colour.
- Read the ratio and the AA/AAA results.
- Adjust the colours until both pass for the sizes you use.
Frequently asked questions
What ratio do I need?
AA requires 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px). AAA raises those to 7:1 and 4.5:1.
Does the checker consider font weight?
Yes, the large-text threshold reflects WCAG’s definition of large type, and the sample uses both weights.
Keep going
Related tools
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
Color Palette Generator
Generate harmonious palettes from one base colour.
RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.
CSS Gradient Generator
Build linear and radial gradients with copy-ready CSS.
CSS Box Shadow Generator
Design layered shadows and copy the CSS.