Pick or paste a text color and a background color — with or without transparency — and get the WCAG 2.2 contrast ratio, AA/AAA verdicts for normal text, large text, and UI components, one-click fixes when a pair fails, color-blindness previews, and an experimental APCA reading. Everything runs in your browser; nothing is uploaded.
Normal text at body size — can everyone read this comfortably?
Large text (18pt+)
Bold text at 14pt counts as large
UI component outlineSimulated approximations of protanopia, deuteranopia, tritanopia, and achromatopsia. A pair that passes on ratio can still be confusing if the two hues collapse to the same appearance — check the previews.
These are the minimum contrast ratios in WCAG 2.2 (computed from the open W3C success criteria 1.4.3, 1.4.6, and 1.4.11):
| Content | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under 18pt, or under 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ / 24px+, or 14pt+ / 18.66px+ bold) | 3:1 | 4.5:1 |
| Non-text UI components & graphical objects (1.4.11) | 3:1 | — (no AAA level defined) |
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker. Relative luminance is L = 0.2126·R + 0.7152·G + 0.0722·B, where each channel is linearized from its sRGB value c (0–1) piecewise:
APCA status, as of mid-2026: APCA was removed from the WCAG 3 working draft, and WCAG 3's contrast algorithm is not yet determined. WCAG 2.2 remains the enforceable compliance standard. The APCA Lc score on this page is an experimental readability signal, not a compliance verdict.
Paste up to 12 colors (one per line, or comma-separated) and get the full pairwise grid: each cell shows the ratio and the best level that pair reaches, rendered in its own colors.
Row = text color, column = background. Tags: AAA ≥ 7, AA ≥ 4.5, AA-L ≥ 3 (large text & UI only), × = fails everything. Transparent palette entries are composited over the page color set above.
Whatever you call it — contrast checker, color contrast calculator, contrast ratio tester, or accessibility color analyzer — the job is the same: measure how far apart two colors are in luminance and compare that against the WCAG thresholds. This tool does it live, on every keystroke, for text in any CSS notation. Where it goes further than a basic web accessibility checker is in the messy cases: transparency, whole palettes, failing pairs you need to rescue, and the non-text elements most tools skip. An annual industry survey of the top one million homepages found low-contrast text failures on 83.9% of them in 2026 — still the single most common accessibility failure on the web, and one of the cheapest to fix.
Passing contrast is necessary but not sufficient for accessibility: a page can hit every ratio and still fail people through missing focus states, unlabeled controls, or color used as the only signal. Treat the numbers here as one gate among several, not a certificate.
The contrast ratio compares the relative luminance of two colors — a measure of how bright each appears, weighted by how sensitive human vision is to red, green, and blue. Each sRGB channel is first linearized (undoing the display gamma curve with the piecewise function shown above), then combined as L = 0.2126·R + 0.7152·G + 0.0722·B. The ratio is (L_lighter + 0.05) / (L_darker + 0.05); the 0.05 terms model ambient light reflecting off a screen. The scale runs from 1:1 (identical colors) to 21:1 (pure black on pure white).
Worked example: #777777 on #FFFFFF. The gray's channels are all 119/255 = 0.4667; linearized, ((0.4667 + 0.055)/1.055)^2.4 ≈ 0.1845, so L ≈ 0.1845. White's L is 1. Ratio = (1 + 0.05) / (0.1845 + 0.05) ≈ 4.48:1 — agonizingly short of the 4.5:1 AA minimum for normal text. This is why mid-gray body text is the most common near-miss on the web: it looks fine to most designers and fails the math by a hair. Darken it one step to #767676 and it passes at 4.54:1.
An AA contrast checker verdict (4.5:1 normal / 3:1 large) is the level nearly all policies, contracts, and legal frameworks reference; it is the practical target for almost every site. AAA (7:1 normal / 4.5:1 large) is a stricter enhanced tier intended for audiences with more significant low vision — worth pursuing for body text on reading-heavy pages, government services, and health or finance content, but not required across an entire interface, and genuinely hard to hold in dense UIs. A sensible default: AAA for long-form body text where it's cheap to achieve, AA everywhere else, and never below AA for anything a user must read to complete a task. If you're running a text contrast checker pass over an existing design, fix every AA failure first; chase AAA only where reading time is long.
In the United States, the ADA (Americans with Disabilities Act) and Section 508 of the Rehabilitation Act are the statutes most often cited around web accessibility. Neither statute contains a contrast table of its own; in practice, both point to WCAG. Section 508 explicitly incorporates WCAG 2.0 AA for federal agencies, and Department of Justice rulemaking for state and local government websites references WCAG 2.1 AA — with WCAG 2.2 AA as the current technical standard the field is converging on. In plain English: if your text passes 4.5:1 (3:1 large) and your UI components pass 3:1, you meet the contrast portion of the standard those laws reference. This page checks the technical thresholds only — it is not legal advice, and contrast is just one of the criteria those standards contain.
Real design work isn't one pair; it's a brand palette of six or ten colors and the question "which of these can sit on which?" Checking pairs one at a time in a two-color widget means re-entering colors dozens of times. The palette matrix above takes the whole list at once and renders every pairwise combination — text color per row, background per column — with the ratio and the best passing level in each cell, drawn in the actual colors so you can eyeball it too. Twelve colors is 132 ordered pairs; the matrix computes all of them instantly and every cell uses the exact same luminance math as the main checker.
WCAG's formula is defined for opaque colors, so a color with alpha has no contrast ratio until you know what's underneath it. The correct procedure — and what browsers actually render — is to composite first: blend the transparent color over its backdrop channel by channel (result = top·α + bottom·(1−α)), then run the luminance math on the flattened result. This checker does that automatically: a text color like rgba(0,0,0,0.6) is composited over the background, and a semi-transparent background is composited over the page color you set beneath it. Tools that ignore alpha silently strip it and check the wrong pair — usually reporting a better ratio than users actually see, which is the dangerous direction. The effective flattened colors are shown next to the ratio so you can verify exactly what was measured.
Since WCAG 2.1, contrast isn't just about text. Success criterion 1.4.11 (non-text contrast) requires at least 3:1 between a user interface component's visual boundary and its adjacent colors — form input borders, checkbox outlines, button edges, focus indicators, toggle states, and the meaningful parts of icons and charts. It's the criterion behind the epidemic of invisible pale-gray input borders. This checker gives UI components their own verdict and preview (the outlined sample in the tool), separate from the text thresholds, because a pair can pass 3:1 for a border while failing 4.5:1 for text — or vice versa. There is no AAA tier for 1.4.11; 3:1 is the line.
As of mid-2026: APCA (the Accessible Perceptual Contrast Algorithm) was developed as a candidate contrast method for WCAG 3, and for a while it appeared in early WCAG 3 drafts. It has since been removed from the WCAG 3 working draft, and WCAG 3's eventual contrast algorithm is not yet determined. WCAG 3 itself remains years from becoming a standard. That means WCAG 2.2 is the enforceable compliance standard today, and the 4.5:1 / 3:1 / 7:1 thresholds are the ones that matter for conformance claims, procurement, and legal exposure.
So why show APCA at all? Because it models some real perceptual effects the ratio doesn't — polarity (dark-on-light vs light-on-dark) and the interaction of contrast with font size and weight — and it can flag pairs that technically pass WCAG 2.x but read poorly, or vice versa. The Lc score here (positive for dark text on light backgrounds, negative for light-on-dark; roughly, |Lc| ≥ 60 is a reasonable floor for body text and |Lc| ≥ 75 is comfortable) is offered as a second opinion for your own design judgment. It is labeled experimental because that's what it is: an evolving algorithm outside any binding standard. When the two disagree, WCAG 2.2 is the verdict; APCA is advice.
Design systems docs, course pages, and internal wikis can embed this contrast checker free of charge. Open Embed this tool at the bottom of the checker, copy the iframe snippet, and keep the credit link that ships with it. The embedded view is the tool only — no navigation, no analytics, no cookie banner.
AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and UI components. AAA raises text thresholds to 7:1 and 4.5:1. UI components (criterion 1.4.11) have a single 3:1 requirement with no AAA tier.
Each color's sRGB channels are linearized piecewise (c/12.92 below 0.03928, otherwise ((c+0.055)/1.055)^2.4), combined into relative luminance L = 0.2126·R + 0.7152·G + 0.0722·B, and the ratio is (L_lighter + 0.05) / (L_darker + 0.05). The result runs from 1:1 to 21:1.
They're composited first, exactly as a browser renders them: the transparent color is blended over what's beneath it (result = top·α + bottom·(1−α) per channel), and the ratio is computed on the flattened result. A transparent background is composited over the page color you set beneath it. The effective colors used are displayed next to the ratio.
No. As of mid-2026, APCA has been removed from the WCAG 3 working draft, WCAG 3's contrast algorithm is undetermined, and WCAG 2.2 remains the enforceable standard. The Lc score on this page is an experimental readability signal only.
No single check does. US accessibility statutes reference WCAG's AA level in practice, and contrast is one criterion among dozens covering keyboard access, labels, structure, and more. Passing contrast is necessary but not sufficient — and this page is a technical checker, not legal advice.
Mid-grays are the classic near-miss: #777777 on white computes to 4.48:1, just under the 4.5:1 AA line. Human vision adapts well to moderate contrast in good conditions, but the thresholds account for low vision, aging eyes, glare, and cheap screens. Darkening one or two steps (e.g. #767676 or #6b6b6b) usually passes without visibly changing the design — the fix suggestions in the checker do exactly that.
No. The parsing, compositing, luminance math, matrix, simulations, and APCA calculation all run as JavaScript in your browser tab. The page keeps working offline once loaded.