Overview
What this tool does
Color contrast is the difference in luminance between two colors. Web accessibility standards (WCAG 2.1) require minimum contrast ratios between text and its background so that people with low vision or in poor lighting can read your content. This tool measures the contrast ratio between any two colors and tells you whether the pair passes WCAG AA and AAA at both normal and large text sizes. A live preview block shows real copy in the chosen colors so you can judge readability with your own eyes alongside the numerical pass/fail. Plus a HEX / RGB / HSL converter that takes any common color format and shows the equivalent in all three notations. Runs entirely in your browser; no upload, no signup.
How to
Use it in 3 steps
- Pick foreground and background colors using the color pickers, or type any color format directly (HEX, rgb(...), hsl(...), or a name like 'navy').
- Read the contrast ratio (the big number) and the pass/fail badges for AA Normal, AA Large, AAA Normal, AAA Large.
- Look at the live preview block: 'The quick brown fox' renders in your actual foreground / background combo. If you can't read it comfortably, the contrast is too low.
- Use 'Swap' to flip foreground and background. Use the converter at the bottom to translate any color between HEX, RGB, and HSL notations.
FAQ
Frequently asked questions
▶What's the difference between AA and AAA?
AA is the standard most public-facing sites are required to meet (legally, in many jurisdictions). AAA is the higher bar most often used for content that needs to be readable by users with significant visual impairment. AA Normal text requires 4.5:1; AA Large text requires 3:1. AAA Normal requires 7:1; AAA Large requires 4.5:1.
▶What counts as 'large text'?
WCAG defines large text as 18pt or larger (24px in CSS), OR 14pt+ (18.66px) if it's bold. Anything smaller is normal text and must meet the higher 4.5:1 (AA) or 7:1 (AAA) threshold.
▶Does this apply to icons and UI elements too?
Graphical elements and active UI components (buttons, form-field borders, focus indicators) need a 3:1 contrast against adjacent colors per WCAG 1.4.11. This tool doesn't differentiate, but use the AA Large threshold (3:1) as the rule of thumb for non-text contrast.
▶Which color formats does the input accept?
HEX (#abc or #aabbcc, with or without the #), rgb(r, g, b), rgba(r, g, b, a) (alpha is ignored for contrast), hsl(h, s%, l%), hsla(...), and basic CSS color names (red, white, navy, etc.). Modern formats (oklch, lab, color-mix) are not yet supported.
▶Why does dark gray on black sometimes 'pass' AAA?
Because the math is about luminance ratios in sRGB, not subjective readability. Very dark grays can have a ratio above 7:1 against pure black even when they're hard to distinguish in practice. Always check the live preview block, not just the number.
▶Is my color data sent anywhere?
No. Color math and conversion run entirely in your browser.