Can everyone read the text on your page? Low contrast is one of the most common accessibility problems on the web. The Contrast Color Finder checks two colors and shows the exact WCAG contrast ratio between them.
It is built for web developers, UI designers, and content creators who care about readable text. You pick a background color and a text color, and the results update as you change them.
Table of Contents
- What the Tool Checks
- How to Use It, Step by Step
- The Contrast Ratio Formula
- Worked Example
- How to Read the Results
- Pass Thresholds and Large Text
- Limitations and Assumptions
- FAQs About the Contrast Color Finder
What the Tool Checks
The tool compares one background color against one text color. Two color pickers feed three result cards and a live preview box.
- Contrast Ratio: the main result, shown as a number from 1:1 up to 21:1.
- WCAG AA (Normal Text): PASS when the ratio reaches 4.5:1, or FAIL below it.
- WCAG AAA (Normal Text): PASS when the ratio reaches 7:1, or FAIL below it.
- Preview Box: a sample line in your two colors, with editable text so you can test your own words.
The whole check runs in your browser. No colors are sent to a server or saved anywhere.
How to Use It, Step by Step
- Click the Background Color picker and choose your page or block color. The sample value is white.
- Click the Text / Foreground Color picker and choose your text color. The sample value is dark slate.
- Watch the Contrast Ratio card update the moment you change a color.
- Read the WCAG AA and WCAG AAA cards for a quick pass or fail.
- Type your own words in the Preview Text box to see them in the pairing.
- Use Copy Result to copy the summary, or Reset to restore the defaults.
The Contrast Ratio Formula
The tool follows the WCAG 2.1 method. It first finds the relative luminance of each color, then compares the two with a fixed formula.
Lighter Luminance + 0.05÷Darker Luminance + 0.05=Contrast Ratio
- Each color channel is scaled to a 0 to 1 range by dividing by 255.
- Low channel values use v divided by 12.92. Higher values use ((v + 0.055) / 1.055) raised to the power 2.4.
- Relative luminance = 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue.
- Contrast ratio = (brighter luminance + 0.05) / (darker luminance + 0.05).
- The ratio is shown with two decimals, like 17.85 : 1.
These numbers match the official WCAG definition. Green counts most toward luminance because the human eye is most sensitive to it.
Worked Example
Priya is styling a blog. She starts with the sample pairing: a white background and dark slate text (#0f172a). Then she tests two more combinations.
| Background | Text Color | Ratio | AA | AAA |
|---|
| White | #0f172a (dark slate) | 17.85 : 1 | PASS | PASS |
| White | #767676 (medium gray) | 4.54 : 1 | PASS | FAIL |
| #2563eb (blue) | White | 5.17 : 1 | PASS | FAIL |
The dark slate text passes both levels with room to spare. The medium gray clears AA but misses AAA. The blue button with white text passes AA only.
How to Read the Results
Contrast Ratio is the core number. A higher ratio means the text stands out more from its background.
WCAG AA (Normal Text) is the common legal and design target. Many teams treat an AA pass as the minimum for body text.
WCAG AAA (Normal Text) is a stricter goal. It helps readers with low vision but is harder to reach with brand colors.
The preview box shows your pair in context. If the sample line is hard to read for you, trust that over any single number.
Pass Thresholds and Large Text
WCAG sets 4.5:1 as the AA floor for normal body text. It sets 7:1 as the AAA floor for the same text.
Large text has lower floors in the full standard: 3:1 for AA and 4.5:1 for AAA. This tool tests only the normal text floors. A note under the tool lists the large text and UI component floors for reference.
If you work in hex and need to split a color into channels, the hex to RGB converter shows the red, green, and blue values. To confirm a code is a real six digit color, try the hex color validator.
Contrast is one part of accessible color. The color blindness simulator shows how a palette looks to different viewers. For a second opinion on any pairing, the color contrast checker covers the same WCAG test.
Limitations and Assumptions
- You can only pick colors with the native color picker. There is no hex or RGB text box in the tool.
- The AA and AAA labels use the normal text rule, not the large text or UI component rules.
- The tool does not check contrast for icons, borders, or graphs, which WCAG rates at 3:1.
- Transparency and background images are not supported. The math assumes two solid colors.
More color and markup helpers live in the developer tools hub.
FAQs About the Contrast Color Finder
What Contrast Ratio Do I Need to Pass?
For normal body text, aim for 4.5:1 to pass WCAG AA. Reach 7:1 to pass the stricter AAA level.
Why Does the Ratio Max Out at 21:1?
Pure black on pure white is the highest possible contrast. That pairing gives exactly 21:1, so no result can go above it.
Is a Passing Score a Guarantee of Good Design?
No. A pass means the math meets the WCAG floor. Font size, weight, and spacing still affect real readability.
Does the Tool Store the Colors I Test?
No. The check runs in your browser only. Nothing is uploaded, logged, or saved after you leave the page.
Why Does My Ratio Pass AA but Fail AAA?
AA needs 4.5:1 and AAA needs 7:1. A pairing between those two values clears AA and misses AAA.
Can I Test Large Headings With This?
You can, but the labels use the normal text thresholds. Large text is allowed a lower 3:1 AA floor in the full standard.
This calculator gives general estimates only and is not professional advice. Reviewed for general accuracy by Prof. Dr. Khalil Mudassar, PhD.