Review a design token
Check whether a text and surface token pair can support normal-size body copy.
All developer toolsRuns locally in your browser
FREE BROWSER TOOL
Contrast Check
Check hex color contrast ratios against WCAG AA and AAA thresholds for normal and large text, with an immediate browser-local preview.
Use Contrast checker now.
Test WCAG text contrast ratios. Your result updates in the current tab as you work.
Contrast Check
Test WCAG text contrast ratios. Nothing you enter here is uploaded or stored.
Readable interfaces begin with measurable contrast.
WCAG result
Contrast ratio: 14.27:1 Normal text (AA): Pass Large text (AA): Pass Normal text (AAA): Pass Large text (AAA): Pass Recommendation: Strong enough for AAA normal text.
WHAT IT DOES
Useful when a small detail is blocking the next step.
Text contrast is a measurable accessibility requirement, not a matter of taste. Contrast Check compares two hexadecimal colors using relative luminance and shows the ratio against common WCAG AA and AAA text thresholds. It helps you choose a readable foreground and background before a palette reaches production.
Repair a muted label
Measure low-emphasis copy before relying on appearance alone, especially on tinted backgrounds.
Document accessibility decisions
Record the contrast ratio for a component state alongside your design or quality review.
WORKED EXAMPLES
See the exact decision the tool can help you make.
These examples are specific to Contrast checker. Replace their values with your own, then use the result as a clue—not as a substitute for application validation.
Evaluate body text
A design uses #64748b text on a white surface.
INPUT
foreground: #64748b background: #ffffff
RESULT
Contrast ratio: approximately 4.7:1 → AA normal text passes
For ordinary body text, 4.5:1 is the common AA threshold. The actual component still needs a check at its rendered opacity and size.
Catch a low-contrast muted state
A disabled-looking label uses #a8b0ad on #ffffff.
INPUT
foreground: #a8b0ad background: #ffffff
RESULT
Contrast ratio: below 3:1 → insufficient for normal text
Muted does not need to mean unreadable. Darken the foreground or rethink whether the text is essential in that state.
HOW TO USE IT
Three deliberate steps.
Use the result to make a decision in your code or content, not merely to produce another value to copy.
- 01
Enter the foreground and background
Use 3- or 6-digit hexadecimal colors such as #fff or #10231f.
- 02
Choose the relevant threshold
Normal text typically needs 4.5:1 for AA; large text can use 3:1. AAA asks for stronger contrast.
- 03
Check the actual component
Opacity, gradients, images, font weight, size, and focus states can change the real contrast in the interface.
A passing ratio is a floor, not the full audit
Contrast does not prove that a control has a visible focus state, that color is not the only signal, or that text is understandable. Test the complete component in context and include non-color cues for errors, status, and selection.
A passing default button tells you little about hover, focus, disabled, error, dark-mode, and image-overlay states. Include contrast checks in the component acceptance criteria and test keyboard focus visibly.
States to inspect:
default · hover · focus-visible · disabled
error · selected · dark mode · image overlayCOMMON PITFALLS
Use the result without creating the next bug.
Each tool is deliberately narrow. These are the mistakes most likely to appear when its output is copied into a real product without checking the surrounding constraint.
Checking base colors but ignoring opacity over a surface.
Why it matters: A semi-transparent foreground blends with its actual background and can lose contrast.
Better approach: Calculate or inspect the final rendered color for each surface and state.
Relying on color alone to show an error or selection.
Why it matters: Some users cannot perceive the distinction, even if the ratio passes.
Better approach: Add text, an icon, a border, pattern, or other non-color cue.
FAQ
Questions worth answering before you rely on the result.
These tools help with bounded client-side work. Production decisions still need the validation, review, and authorization appropriate to your application.
01What counts as large text?
WCAG defines large text by rendered size and weight, commonly at least 24 CSS pixels regular or 18.66 pixels bold. When uncertain, meet the normal-text threshold.
02Does this test icons?
The displayed results are text thresholds. Non-text UI components have related WCAG requirements; test the actual icon, border, and state in context.
03Why can a design look readable but fail?
Human perception adapts to context and display conditions. A numerical ratio provides a consistent baseline across devices and lighting.
KEEP BUILDINGMore small tools,