Free Color Contrast Checker – WCAG 2.2 Accessibility Test
A beautiful palette is only useful when people can read the content it carries. The Color Contrast Checker compares a foreground color with a background color using relative luminance, then shows the ratio alongside WCAG AA and AAA text results. The live preview makes it easier to judge headings, body copy and small labels in context.
Contrast is one part of accessibility, not a complete accessibility verdict. A passing pair cannot confirm that a page has meaningful headings, keyboard access, readable focus indicators or accessible forms. Use the result as evidence for a specific color combination, and review the complete interface with its real text sizes, backgrounds and interaction states.
How to use the Contrast Checker
- Identify the foreground and background of the exact element you want to test, not just two colors from a general palette.
- Enter the HEX values or select colors using the text and background pickers.
- Read the ratio and the separate AA and AAA results for normal and large text.
- Compare the live preview with the intended font size and weight. Small captions need the normal-text threshold.
- If the pair fails AA normal text, try the suggested foreground or choose a different text/background pairing while retaining the original brand colors elsewhere.
- Retest the real element’s default, focus, hover and disabled states, especially when images, transparency or overlays change the background.
12 key features
- Text color HEX input.
- Background color HEX input.
- Visual color pickers.
- Instant relative-luminance calculation.
- Contrast ratios from 1:1 to 21:1.
- AA normal-text result.
- AA large-text result.
- AAA normal-text result.
- AAA large-text result.
- Foreground/background swap.
- Live heading, body and caption preview.
- Suggested foreground adjustment for failing AA normal-text pairs.
WCAG AA, AAA and large text
WCAG 2.2 keeps the familiar contrast requirements from WCAG 2.1. Success Criterion 1.4.3 requires at least 4.5:1 for normal text at level AA and 3:1 for large text. Success Criterion 1.4.6 raises the thresholds to 7:1 and 4.5:1 at level AAA. A pair that passes large-text AA can still fail for the smaller text beside it.
Large text means at least 18 points regular or 14 points bold, commonly equivalent to 24 CSS pixels regular or about 18.67 CSS pixels bold. Do not treat a visually prominent label as large merely because it is uppercase. Check the actual computed size and weight, and remember that thin fonts can remain difficult to read even when the calculated ratio passes.
Non-text contrast and interface states
Success Criterion 1.4.11 covers visual information needed to identify user-interface components and meaningful graphics, with a 3:1 threshold against adjacent colors where the criterion applies. The four badges above describe text criteria; they do not automatically inspect icons, chart boundaries or the full structure of a control.
Test meaningful icon strokes and component boundaries against their actual neighboring surfaces. A keyboard focus indicator must also be evaluated in context, including whether it is visible and obscured. Disabled controls and decorative graphics have specific exceptions, but exceptions should not become a reason to make important information unnecessarily hard to perceive.
Keeping brand colors without sacrificing readability
Bright accents often work better as filled surfaces with a dark foreground than as small text on white. Preserve an orange or green brand value for a banner, marker or decorative detail, then select a readable text color for the information it carries. Changing the role of a color is often more appropriate than changing the approved brand palette.
Consider a product button using a bright accent: first compare dark text on the accent and light text on the same accent. Choose the pairing that satisfies the intended text criterion, then verify the outline, neighboring background and focus state separately. Never communicate errors or status only by changing red to green; include a label or meaningful symbol.
How the ratio is calculated
The calculation converts sRGB color channels into linear-light values, combines them into relative luminance, and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. Equal colors produce 1:1; black and white produce 21:1. The ratio expresses luminance contrast rather than how different the hues look.
The screen displays a rounded ratio, but threshold decisions use the underlying value. A number that rounds to 4.50 may still sit just below 4.5. This checker uses opaque color inputs. It does not combine transparent text with images or simulate every pixel beneath a gradient, so calculate the effective pair or test the least-contrasting region yourself.
Who benefits from a contrast review?
Designers can validate palette roles before handing off a style guide, and developers can check the values used by actual components rather than relying on a screenshot. Marketers should test small text in promotion graphics and landing pages, while content teams should check links, captions and information shown on colored banners.
For SEO and quality reviews, record the affected element, its two colors, text size and result instead of giving an entire website a blanket pass. Pair the color test with keyboard checks, screen-reader review and real-device reading. Outdoor glare, low-quality displays and reduced vision make strong contrast useful far beyond formal compliance.
Continue your workflow
- Logo Extractor — Upload a logo and get its exact brand colors in HEX, RGB and HSL.
- Palette Generator — Create harmonious palettes, lock, shuffle and export.
- Theme Generator — Build light and dark UI themes from your palette with live preview.
- Website Auditor — Score SEO, mobile, HTTPS and image checks with fix tips.