Color Contrast Checker (WCAG)
Pick a foreground and background color to check the WCAG accessibility contrast ratio.
Sample text
The quick brown fox jumps over the lazy dog.
Contrast ratio
17.06:1
How the ratio is calculated
The contrast ratio follows the WCAG 2.1 formula, based on the relative luminance of each color. It ranges from 1:1 (no contrast) to 21:1 (black on white), the maximum possible.
Frequently asked questions
What contrast ratio do I need?
WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text to meet the AA level, and 7:1 / 4.5:1 respectively for the stricter AAA level.
What counts as large text?
Text is considered large when it is at least 18pt (24px), or 14pt (about 18.66px) bold.
Why does contrast matter?
Sufficient contrast helps people with low vision or color blindness read your content, and is a legal accessibility requirement in many jurisdictions.
Related tools
You might also need these while working on the same task.
Build linear or radial CSS gradients visually and copy the ready-to-use CSS code.
Open toolGenerate random, analogous or complementary color palettes with HEX, RGB and HSL.
Open toolGenerate MD5, SHA-1, SHA-256, SHA-384 and SHA-512 hashes from any text.
Open toolCreate a Brazilian PIX copy-and-paste QR code in seconds.
Open tool