Color Contrast Checker
Check the contrast ratio between two colors against WCAG AA and AAA.
How to use the Color Contrast Checker
- Enter your text color (HEX or RGB).
- Enter the background color.
- See the contrast ratio and which WCAG levels it passes.
About the Color Contrast Checker
Whether text is readable against its background is measurable, not a matter of taste. The WCAG accessibility guidelines express it as a contrast ratio running from 1:1 (two identical colors) to 21:1 (black on white). Enter a text color and a background color as HEX (#137256 or #137) or RGB (rgb(19,114,86)), and this checker reports the exact ratio to two decimal places along with a pass or fail against four thresholds: 4.5:1 and 7:1 for normal text (AA and AAA), and 3:1 and 4.5:1 for large text.
The calculation is the official WCAG relative-luminance formula — each channel is linearised, then weighted for how bright the eye perceives it — so the figure matches what accessibility auditing tools report. The ratio always compares the lighter color against the darker one, which means swapping the two fields gives you exactly the same number.
It compares two solid colors, so it cannot judge text sitting on a photo, a gradient or a semi-transparent overlay; for those, sample the pixel behind the text first. It does not scan a live page either — you supply the colors. To translate a value before pasting it, use the color converter, and to build a passing palette around a brand color, try the shades generator. Nothing is uploaded.
Frequently asked questions
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. AAA raises those to 7:1 and 4.5:1 respectively. The checker tests all four at once, so you can see exactly which levels your pair clears.
What counts as large text?
Roughly 18pt (24px) at normal weight, or 14pt (18.66px) bold and above. Anything smaller is treated as normal text and has to meet the stricter threshold.
Which color formats can I enter?
HEX in three-digit or six-digit form (#137 or #137256) and RGB such as rgb(19,114,86). Either field accepts either format, so you can mix them.
Does it matter which color I put in which field?
No. The formula divides the lighter luminance by the darker one, so the ratio is identical whichever way round you enter them.
Why does my text still look hard to read despite passing?
The ratio only measures the two colors you give it. Thin font weights, small sizes, low-quality screens and text over busy images all hurt readability without changing the number, so treat a pass as a floor rather than a guarantee.