Color Contrast Checker — Free WCAG Ratio & Accessibility Tool

A color contrast checker tells you whether text is actually readable against its background — measured objectively, not just eyeballed — by calculating a precise contrast ratio and comparing it against the WCAG accessibility standards used by designers, developers, and legal accessibility audits worldwide. This tool computes that ratio in real time from any two colors you choose, shows a live text preview so you can see the pairing exactly as a visitor would, and flags pass/fail results for every WCAG conformance level: AA and AAA, for both normal and large text.

Arb Digital runs every client site through contrast checks like this one before launch. Low-contrast text is one of the most common — and most avoidable — accessibility failures on the web, and it's also one of the fastest to fix once you can see the exact ratio in front of you instead of guessing.

What This Color Contrast Checker Does

Pick a foreground (text) color and a background color using either the color picker or by typing a HEX code directly. The tool immediately calculates the relative luminance of each color, derives the contrast ratio between them, and displays four pass/fail badges covering the WCAG 2.1 thresholds for normal text and large text at both the AA and AAA conformance levels. The live preview box below shows real sample text — one large heading-style line and one normal-size paragraph line — rendered in your exact colors, so you can judge readability visually alongside the numeric ratio.

The tool also gives you a ready-to-copy CSS snippet with your chosen color and background-color values, so once you've found a pairing that passes, you can drop it straight into your stylesheet.

How to Use the Color Contrast Checker

1. Set your text color. Use the color picker or type a HEX code into the foreground field.
2. Set your background color. Do the same for the background field — this is usually the surface the text sits on: a card, button, page background, or banner.
3. Read the contrast ratio. The large number shown is the exact ratio between your two colors, expressed as X:1.
4. Check the pass/fail badges. Green means that combination meets the standard; red means it falls short and should be adjusted.
5. Look at the live preview. Confirm visually that both the large and normal-size sample text are comfortably legible.
6. Copy the CSS. Once you're satisfied, copy the generated color declarations directly into your code.

How Contrast Ratio Is Calculated

Contrast ratio is derived from the relative luminance of each color — a measure of how bright a color appears to the human eye, weighted by how sensitive our vision is to red, green and blue light respectively. As the W3C's WCAG 2.1 contrast guideline defines it, relative luminance is computed by converting each sRGB channel (red, green, blue) into a linear value, weighting them (roughly 21.26% red, 71.52% green, 7.22% blue — reflecting the eye's greater sensitivity to green), and summing the result. The contrast ratio between two colors is then (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 the luminance of the darker one. The result ranges from 1:1 (identical colors, zero contrast) to 21:1 (pure black on pure white, maximum possible contrast).

MDN's color contrast documentation confirms this is the exact formula browsers, accessibility auditing tools, and browser DevTools contrast checkers all use — so the ratio shown here matches what any standards-compliant accessibility tool will report for the same two colors.

WCAG AA vs. AAA — What the Thresholds Mean

WCAG 2.1 defines two conformance levels most teams care about, each with separate thresholds for normal text and large text:

• AA Normal Text — minimum 4.5:1. This is the baseline legal and professional standard for regular body text (below 18pt, or below 14pt bold). Most accessibility audits, government requirements (like Section 508 in the US), and mainstream design systems target this level as the floor.
• AA Large Text — minimum 3:1. Large text (18pt/24px and above, or 14pt/18.66px and above when bold) is easier to read even at lower contrast, so the WCAG threshold is relaxed for headings and large UI labels.
• AAA Normal Text — minimum 7:1. A stricter, "enhanced" standard recommended for content aimed at users with low vision, or for organizations targeting the highest accessibility bar.
• AAA Large Text — minimum 4.5:1. The enhanced threshold for large text, still more forgiving than AA normal text.

Most production websites target AA as the practical minimum across all text, since it's the level referenced by the ADA's web accessibility guidance and most corporate accessibility policies. AAA is a stretch goal, often applied selectively to primary content rather than every UI element, since it can be difficult to satisfy while still using a full, expressive color palette.

Fixing a Failing Color Pair

When a combination fails, the fix is almost always to increase the lightness gap between the two colors rather than changing hue. A few practical approaches: darken the text color, lighten the background, or do both slightly rather than one drastically — this usually preserves brand color intent better than an extreme single-side change. If the failing pair involves a brand color used as the text color on a light background, consider using that brand color only for large headings (which need less contrast) and switching to a darker neutral for body copy. Conversely, if a brand color is used as a background behind white text, a slightly darker shade of that same brand color often clears AA while staying visually on-brand.

Contrast for Non-Text Elements

Text contrast gets the most attention, but WCAG 2.1's non-text contrast criterion also requires a minimum 3:1 ratio for meaningful graphical elements and interactive component boundaries — think button outlines, form field borders, icons that convey information, and focus indicators. This tool's foreground/background inputs work equally well for checking those pairings; just treat the "foreground" color as the border, icon, or outline color instead of body text.

Common Mistakes to Avoid

• Judging contrast by eye alone. Two similarly-saturated colors can look distinct on a bright monitor yet fail the actual ratio test — always verify with a calculator, not intuition.
• Testing brand colors only at full opacity. A text color with reduced opacity effectively blends with the background and lowers the real contrast ratio below what the solid HEX value would suggest.
• Ignoring placeholder and disabled-state text. Faint gray placeholder text is one of the most common contrast failures on the web — check it explicitly, not just primary body copy.
• Assuming large text rules apply to bold body copy. The large-text threshold only kicks in at 18pt regular or 14pt (18.66px) bold specifically — a slightly bold 12px label still needs to meet the normal-text ratio.
• Only checking the darkest/lightest brand shades. Mid-tone brand colors used as backgrounds behind white or black text are the most common source of contrast failures — test every real pairing used in the interface, not just the extremes.

Related Free Tools From Arb Digital

Once you've found a passing color pair, convert it to whatever format your codebase needs with the HEX to RGB converter or RGB to HEX converter. Apply your finalized colors to backgrounds and buttons using the CSS gradient generator or add depth with the box shadow generator, and shape your layout with the CSS grid generator. Browse every free utility at our free online tools hub.

Frequently Asked Questions

This tool runs entirely in your browser — nothing you enter is uploaded or stored.