In Color Contrast Checker you pick any two colors whether that’s hex, rgb(a), hsl, or a plain color name and get their WCAG contrast ratio, pass/fail verdicts for normal text, large text, UI components, and a live preview. No sign-up, no uploads!
WCAG 2.1 contrast ratio
- Normal text (< 18pt —
- Large text (≥ 18pt or 14pt bold —
- UI components & graphics —
Accessible sample text
Small text sample — 4.5:1 minimum for AA.
Smart suggestion
Current ratio already meets the standard for most normal text.
Nearest AA-safe color
Try a darker text tone for a more readable pairing.
Palette comparison
A web-based color contrast tool for accessible design & UI
Test website, application, dashboard, landing page and brand system text and background color combinations for free. It is useful for designers and developers to confirm that a pair is compliant with WCAG AA or AAA standards at a rapid pace before the pair is published to production.
Need a WCAG contrast ratio calculator, accessible color contrast test, or a reliable hex color contrast calculator for product design, marketing pages or accessibility reviews, this tool will instantly provide you with a live preview, pass/fail information, and tips to improve color contrast.
Verify contrast of body text, headings, buttons, badges and UI states. Before locking a design system into a color palette, make sure to compare different color choices.
What Is a Color Contrast Checker?
A color contrast checker calculates the difference in lightness between two color values, typically between the color of the text and the background, and outputs the difference as a numerical value, called the contrast ratio. Web Content Accessibility Guidelines (WCAG) provide a formula for calculating contrast so that designers, developers and content teams everywhere are operating from the same set of guidelines rather than by “gut feel” on whether a color is “readable.”
Why is this significant? About one out of every twelve men and one out of every two hundred women have some type of color blind vision, and millions more use low vision, glare or dimming. When a page’s contrast is below the guidelines, this makes it more difficult for users to read the page — and for many users, more difficult for everyone to read in bright daylight or on a low quality screen. If you can test it before launch, the single most objective, math-based signal of legibility of the text is the contrast ratio.
How our Color Contrast Checker Works?
Enter a color (or one of the native color swatches): and the tool automatically interprets the color (whether it is a six-digit hex value #60089c, a shorthand hex #fff, an rgb(52, 152, 219) value, an rgba(), an hsl(), or just a CSS color name rebeccapurple). The calculator is doing the following in the background: The calculator translates the color to its linear RGB components, and applies the WCAG relative-luminance formula:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Where each channel is first normalized to a 0–1 range and gamma-expanded. The contrast ratio is then:
(Llighter + 0.05) ÷ (Ldarker + 0.05)
When one color is pure black, the ratio will tend to zero unless it is kept from doing so by the +0.05 terms. The ratios are from 1:1 (same color, nearly imperceptible text) to 21:1 (pure black on pure white). It then checks your work against the WCAG 2.1 AA and AAA standards.
WCAG Contrast Thresholds at a Glance
Normal text
< 18pt (or < 14pt bold
AA: 4.5 : 1
AAA: 7 : 1
Large text
≥ 18pt or ≥ 14pt bold (about 24px/19px
AA: 3 : 1
AAA: 4.5 : 1
UI components
Icons, buttons outlines, form borders
AA: 3 : 1
AAA: no defined level
Quick Reference
| Use case | Minimum AA | Minimum AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Buttons & icons | 3:1 | Not specified |
How to Use the Tool
- Enter your colors. Type a hex code or click the color swatch to choose a color from your system color picker. The fields will take virtually any CSS color.
- Read the ratio. The large number is the WCAG contrast ratio rounded to one decimal place.
- Check the badges. The results for each row indicate whether the pair meets WCAG AA or AAA guidelines for normal text, large text, and UI components. Green: Pass, Red/Orange: Fail, Gray: No standard applies.
- Inspect the preview. The sample panel will give you your exact pair, so you can view the results with your own eyes — the math + eyeball test.
- Watch the scale. The bar indicates your ratio’s position relative to the thresholds (3:1, 4.5:1, and 7:1) to help determine how close you are to passing.
Use Cases for a Contrast Ratio Checker
- Web and UI design: Preview the pair of buttons and/or card background colors before selecting a color lock. A mild 4.4:1 ratio can quietly fail accessibility audits for months, it only takes 5 seconds to check, and the design will be saved from being redone later in the game.
- Branding and marketing: Brand colours are used in a variety of marketing materials, including social graphics, slide decks, emails and landing pages. Ensure that white text is clear at least at AA for the size of the text it will appear in when positioned on a brand purple background (or vice versa).
- Data visualization: Thin grid lines, low opacity legends, desaturated series, and charts and dashboards that are otherwise the same. Apply it to your chart palette so that all the labels and annotations are accessible to stakeholders with low vision.
- Accessibility audits and compliance: WCAG 2.1 AA is an international legal and procurement standard (Section 508 and the European Accessibility Act). One of the lowest cost compliance victories is a documented contrast check, by component type.
Pro Tips for Choosing Accessible Color Pairs
- Draw in black and white: Be sure to establish a good luminance difference, then introduce hue; hue alone should never convey meaning.
- Avoid saying “It’s dark enough: Do not assume that “dark enough” is dark enough. It is a dark blue, on black that can fail; it is the ratio of luminace values, not perceived darkness that is important.
- Watch opacity: The text color is not #333 when there is a lot going on in the picture. Test the effective blended colour.
- Large text is eligible for a discount: Only 3:1 for AA for headlines (18pt+) Use very low contrast only for very large display type — if you can’t use any less.
- Test on a worst case background: If your text is over a gradient or image, you should test the contrast on the lowest contrast area, not the average.
- Take caution with the pure white/ pure yellow combination: Both are high-luminance, the ratio being in the vicinity of 1.4:1 — unreadable.
Related Tool
Read the Common Mistakes and FAQs.
Can 3:1 be used in body text?
The AA minimum ratio is 3:1 for large text/large UI components and 4.5:1 for normal body text and 7:1 for AAA. Err on the side of caution and use normal text if it is not otherwise specified in the design specification.
Is “passing” equated with the colors being “guaranteed” accessible?
One factor of accessibility is contrast. The font weight, the spacing, size and quality of the display screen, and the user’s settings also affect legibility. Having a passing ratio is a good sign, not a certainty, but when it’s less than 1, things don’t look good.
What are the ratios of the tools using the same colors?
Rounding, gamma correction, and blending alpha channels with white can affect the last decimal place. This tool uses the relative luminance guideline specification from WCAG 2.1 and rounds to 1 decimal place, as per the published values in the guideline.
What contrast does white text on purple background get?
Type in #ffffff and your brand purple into the fields above to see exactly. Mid-purples such as #60089c, as a general rule, fall between 7-9:1 ratio against white – in the normal text range of AAA.
Should I test all the combinations of colours for my app?
Not all pairs, but all possible combinations of text color, background and state of the component (hover, disabled, active) that a user may see. Typically, it will be a couple dozen pairs, and should be easily batch-checked with a utility such as this.
Last updated: September ️12, 2026 | Sources: WCAG 2.1 (W3C,, relative luminance and contrast ratio definitions), CSS Color Module Level 4.
Disclaimer – Results are provided for guidance only and follow the WCAG 2.1 contrast ratio formula as of the last-updated date. Accessibility decisions should always be verified against the official W3C documentation and real-user testing, especially for regulated environments.
Calculators | Converters | Games | Generators | Random | Web Tools | Developer Tools