Color Contrast Checker
Check WCAG color contrast for text and background - free, no signup.
Large preview text
Normal-sized preview text, for reading at a typical body-copy size.
What this tool does
Enter a text color and a background color, and see the exact contrast ratio alongside a pass/fail result for all four WCAG 2.x thresholds at once: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). A live preview shows real text rendered at your chosen colors, so you can judge readability directly, not just read a number.
Calculates the exact WCAG 2.x contrast ratio between a text color and a background color, using the standard relative-luminance formula.
Checks the result against all four WCAG success criteria thresholds simultaneously, rather than a single pass/fail.
Shows a live preview of real text at both a normal and a large size, rendered in your actual chosen colors.
Lets you swap the text and background colors with one click, to instantly check the reverse combination without retyping either value.
Provides a color picker next to each text field, so you can choose the text and background colors visually instead of typing hex codes.
How to use it
- Pick or type a text color and a background color.
- Read the contrast ratio and which WCAG thresholds it passes.
- Use the live preview to judge real-world readability.
Why use this checker
Low contrast makes text hard to read and fails accessibility rules. A ratio against the WCAG thresholds shows whether a pairing passes before you ship it.
Why we built it
We built the contrast checker to test all four WCAG thresholds (AA and AAA, normal and large text) at once, not a single pass or fail. See how a design looks to colour-blind users with the colour blindness simulator and adjust colours with the colour converter.
For a neighbouring job there is also the Gradient Generator.
Who this tool is for
- Web designers and developers testing accessibility
- Content designers choosing text colours
- Teams working to WCAG
When to use it
- Checking text and background colours.
- Meeting WCAG AA or AAA.
- Reviewing a brand palette.
- Fixing accessibility audit results.
Why there are four thresholds, not one
Large text needs less contrast to stay readable than small text does.
WCAG defines separate contrast requirements for normal-sized text and large text (18pt/24px and above, or 14pt/18.66px bold and above), because larger text remains legible at a lower contrast ratio than small text does. Level AA - the standard most accessibility guidelines and legal requirements reference - needs 4.5:1 for normal text but only 3:1 for large text. Level AAA is a stricter, optional standard, needing 7:1 and 4.5:1 respectively. Checking all four at once means you can see immediately which combinations of text size and WCAG level your colors would satisfy.
What this checker covers, and what it doesn't
WCAG's text-contrast rules and its UI-component contrast rule are two separate success criteria.
The four results this tool shows - AA/AAA at normal and large text sizes - come from WCAG's text-contrast success criteria, 1.4.3 (Contrast Minimum, the AA rule) and 1.4.6 (Contrast Enhanced, the AAA rule). Both are calculated from the same underlying relative-luminance formula applied to your two chosen colors.
WCAG also has a separate 3:1 contrast requirement for user-interface components and graphical objects (success criterion 1.4.11) - things like button borders, form field outlines, and icons that carry meaning. That's a different criterion from the four checked here, and this tool doesn't evaluate it; treat a pass on the four text thresholds as a statement about text readability only, not about every colored element on a page.
What you give it, and what you get back
| Item | Details |
|---|---|
| Input | A text colour and a background colour. |
| Output | The contrast ratio and pass or fail for normal and large text at AA and AAA. |
| Preview | A live sample. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| It passes but is hard to read | Thresholds are minimums. | Aim for better contrast. |
| Text on an image | Flat colours only are checked. | Test across the image. |
| Fails for large text only | Large text has lower thresholds. | Increase size or contrast. |
Assumptions and limitations
- This checks contrast between two flat colors; it doesn't account for text rendered over an image, gradient, or semi-transparent background, where effective contrast varies by position.
- Passing a WCAG contrast threshold is necessary but not sufficient for accessibility - font choice, size, and other factors also affect real-world readability.
Frequently asked questions
How do I check color contrast online for free?
Enter a text color and a background color, and the exact contrast ratio plus WCAG AA/AAA pass/fail results appear instantly.
What contrast ratio do I need for WCAG AA?
4.5:1 for normal-sized text, or 3:1 for large text (18pt+ or 14pt+ bold) - level AA is what most accessibility guidelines and legal requirements reference.
What's the difference between AA and AAA?
AAA is a stricter, optional WCAG level needing 7:1 for normal text and 4.5:1 for large text, versus AA's 4.5:1 and 3:1. Most sites target AA as their baseline.
Why does text size affect the required contrast?
Larger text remains legible at a lower contrast ratio than small text, so WCAG sets a lower bar (3:1 for AA) specifically for large text.
Is my data uploaded anywhere?
No. The check happens entirely in your browser - nothing is sent to a server.
Does this check WCAG's 3:1 requirement for UI components and icons?
No - this checks the text-contrast criteria (SC 1.4.3 and 1.4.6): AA/AAA pass/fail for normal and large text. WCAG's separate 3:1 rule for user-interface components and graphical objects (SC 1.4.11) covers things like button borders and icons, which this tool doesn't evaluate.
What does the Swap colors button do?
It swaps your text and background color values and instantly recalculates the ratio and pass/fail results - useful for checking both directions, like light text on a dark card versus dark text on a light one, without retyping either value.