Color Contrast Checker
Check WCAG contrast ratios for accessible text and UI.
The Color Contrast Checker measures the WCAG contrast ratio between two colors and tells you whether they pass AA or AAA requirements for normal and large text.
Preview
The quick brown fox jumps over the lazy dog
Contrast ratio: 17.72:1
AA PassAA Large PassAAA PassAAA Large Pass
How to use
- Enter or pick a foreground color.
- Enter or pick a background color.
- Review the ratio and the AA/AAA pass badges.
Frequently asked questions
What is a good contrast ratio?
For normal text, WCAG AA requires at least 4.5:1 and AAA requires at least 7:1.
What counts as large text?
Large text is usually 18pt or 14pt bold, which has a lower AA threshold of 3:1.
Related tools
Color Palette Generator
Create harmonious color palettes with random, analogous, complementary and triadic modes.
Color Converter
Convert colors between HEX, RGB, HSL and HSV instantly.
Color Blindness Simulator
Preview how images look for common types of color blindness.
Color Gradient Generator
Create CSS linear gradients with custom colors and directions.
JSON Formatter
Format, validate and minify JSON in one place.
XML Formatter
Pretty-print and indent XML documents.