What is Contrast Checker?
A WCAG contrast checker compares a foreground color and a background color and reports how readable the pair is. This The ToolSphere Contrast Checker computes the contrast ratio from relative luminance in the sRGB color space, then shows pass or fail for common WCAG 2.1 text and non-text thresholds.
You pick or paste HEX colors for text (or UI) and its background. The tool returns a single ratio such as 7.12:1, plus badges for AA normal text, AA large text, AAA normal text, AAA large text, and UI contrast at 3:1. A live preview shows the pair as typed.
It is a private browser utility: colors stay on your device. The checker is a design aid for evaluating color pairs. It does not certify that an entire page, product, or organization meets accessibility requirements.
Why Use This Tool?
Contrast failures are common when brand colors look fine on a bright monitor but fail for people with low vision, in sunlight, or on cheaper screens. Checking ratios early prevents expensive redesigns after QA or legal review.
Use this tool when choosing body text colors, link styles, form labels, icons against fills, or button labels. Pair it with the Color Converter and Color Palette Generator when you need to adjust hue without guessing HEX by hand.
- Instant AA and AAA checks for normal and large text thresholds used by WCAG 2.1
- Separate UI 3:1 badge aligned with non-text contrast expectations
- HEX picker plus typed input for design-system tokens
- Runs locally with no account and no color upload to The ToolSphere servers
How Does This Tool Work?
Enter valid 3-digit or 6-digit HEX values for foreground and background. Invalid HEX clears the result until both colors parse. The implementation converts each channel to 0–255 RGB, computes relative luminance for each color, then forms the contrast ratio from the lighter and darker luminances.
Pass badges compare that ratio to fixed thresholds: 4.5:1 for AA normal text, 3:1 for AA large text, 7:1 for AAA normal text, 4.5:1 for AAA large text, and 3:1 for UI. Large text in WCAG means at least 18 point, or 14 point bold; this tool does not measure your CSS font-size—it only applies the large-text ratio thresholds.
- Parse HEX → RGB
- Compute relative luminance per channel (sRGB linearization)
- Contrast ratio = (Lighter + 0.05) / (Darker + 0.05)
- Compare ratio to AA / AAA / UI thresholds and update badges
Understanding Your Results
A higher ratio means more contrast. Black on white is about 21:1. Identical colors are 1:1. Passing AA for normal text means the ratio is at least 4.5:1. Passing AAA normal requires at least 7:1.
AA large and UI both use a 3:1 floor in this tool. That does not mean large text and icons have identical rules in every product context—always map the badge to how you will actually use the colors. Semi-transparent overlays, gradients, and images behind text are outside what a flat HEX pair can prove.
- AA normal: ratio ≥ 4.5:1
- AA large: ratio ≥ 3:1
- AAA normal: ratio ≥ 7:1
- AAA large: ratio ≥ 4.5:1
- UI 3:1: ratio ≥ 3:1 for non-text component checks in this UI
Why Tracking This Matters
Readable contrast supports people with low vision, aging eyes, and anyone reading in difficult lighting. It also reduces support tickets about unreadable labels and improves usability for everyone.
Teams that check tokens early avoid shipping text that only looks fine on one calibrated monitor.
Benefits of Using Contrast Checker
- Clear pass/fail badges instead of mental math
- Matches the WCAG relative luminance approach used across modern checkers
- Helps tune brand colors toward usable text and UI pairs
- Live preview confirms what the numbers imply
- Private: colors are not uploaded for this tool
- Complements palette and converter tools in the same category
How Is the Result Calculated?
Relative luminance for an 8-bit sRGB channel C is computed after normalizing to 0–1. If the normalized channel is less than or equal to 0.03928, it is divided by 12.92; otherwise it uses ((C + 0.055) / 1.055) raised to 2.4. Luminance combines channels with weights 0.2126 (R), 0.7152 (G), and 0.0722 (B). The contrast ratio divides the lighter luminance plus 0.05 by the darker luminance plus 0.05.
Those constants and the 4.5:1, 3:1, and 7:1 thresholds follow WCAG 2.x definitions for relative luminance, contrast ratio, Contrast (Minimum), Contrast (Enhanced), and Non-text Contrast. This page does not claim your site is compliant—only that the reported pair meets or misses those numeric thresholds.
(L1 + 0.05) / (L2 + 0.05) where L1 ≥ L2 are relative luminances
- L1, L2
- Relative luminances of the two colors in the sRGB model used by WCAG.
- AA normal / AAA normal
- 4.5:1 and 7:1 minimum ratios for regular-sized text.
- AA large / AAA large
- 3:1 and 4.5:1 minimum ratios when text qualifies as large under WCAG.
- UI 3:1
- 3:1 threshold shown for non-text UI contrast checks in this tool.
Tips for Better Results
- Test the exact HEX tokens you ship, not approximate swatches from a slide deck.
- Check hover, focus, disabled, and dark-theme pairs separately.
- Do not rely on large-text thresholds unless your type truly meets WCAG large-text size rules.
- For icons and borders, use the UI 3:1 badge as a starting point, then verify against real UI chrome.
- If a brand color fails, lighten or darken lightness in HSL via the Color Converter rather than changing hue blindly.
- Gradient or photo backgrounds need additional spot checks beyond a single flat pair.
Standards and References
Conclusion
Use the Contrast Checker whenever you lock in text, icon, or control colors. Read the ratio, match it to the right WCAG threshold for how the color will be used, and adjust until the badges you need pass.
Treat results as precise pair math—not a full accessibility audit—and re-check tokens whenever the brand palette changes.