Contrast Checker
Check the contrast ratio between a text color and a background color and see whether it passes WCAG 2.2 AA and AAA for normal and large text.
This tool runs entirely in your browser.
Loading tool…
How to use the Contrast Checker
- 1Enter or pick the text and background colors.
- 2Read the contrast ratio and the pass/fail results.
- 3Use “Swap” or adjust lightness until the checks pass.
What is the Contrast Checker?
WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) at level AA; AAA requires 7:1 and 4.5:1. User-interface components and icons need 3:1.
The ratio ranges from 1:1 (identical colors) to 21:1 (black on white).
Frequently asked questions
Does the checker handle transparent colors?
Use solid colors. For semi-transparent text, check the color it actually appears as on the background.
Is the Contrast Checker free and private?
Yes. The Contrast Checker is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.
Related tools
All color tools →- Color PickerPick colors and get HEX, RGB and HSL codes.
- Color Palette GeneratorGenerate harmonious color palettes.
- HEX to RGBConvert HEX color codes to RGB.
- Color ConverterConvert any color between HEX, RGB, HSL, HSV and CMYK.
- RGB to HEXConvert RGB color codes to HEX.
- HEX to HSLConvert HEX color codes to HSL.