What is a good contrast ratio for text?

For normal body text, aim for at least 4.5:1 — that is the WCAG AA minimum (SC 1.4.3). 7:1 meets the stricter AAA level. Large text (24px or larger, or 18.66px bold) only needs 3:1 for AA and 4.5:1 for AAA. Higher is always more legible.

What is the minimum WCAG AA contrast ratio?

4.5:1 for normal text and 3:1 for large text, set by WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum). User-interface components and meaningful graphics need 3:1 under SC 1.4.11. Most accessibility laws — the EU Accessibility Act, US Section 508, ADA — reference these AA levels.

How is contrast ratio calculated?

Each color's relative luminance is found by linearising its sRGB channels and weighting them 0.2126 red, 0.7152 green, 0.0722 blue. The ratio is then (L_lighter + 0.05) / (L_darker + 0.05). It ranges from 1:1 (identical colors) to 21:1 (black on white). The full formula is shown in the How it works section.

What counts as large text in WCAG?

Text is large-scale at 18pt and above (about 24px) at a regular weight, or 14pt and above (about 18.66px) when bold. Large text gets lower thresholds — 3:1 for AA, 4.5:1 for AAA — because bigger glyphs stay readable at lower contrast. This tool applies the right threshold once you pick a size and weight.

Does white text pass accessibility on my brand color?

Enter your brand color as the background and #FFFFFF as the text color — the checker shows the ratio and whether it clears AA and AAA. For example, white on this site's sapphire (#1E3A8A) is 10.36:1, which passes every level. If yours fails, use the nudge-to-pass suggestion to darken the background.

Should I check contrast with the foreground or background lighter?

It does not matter. The contrast-ratio formula always divides the lighter luminance by the darker one, so swapping text and background gives the identical ratio. The swap button is there for convenience and to preview the reversed pairing, not because the number changes.

Does this tool support APCA or WCAG 3 contrast?

Not yet. This version uses the ratified WCAG 2.1 algorithm, which is the standard cited by current accessibility law and audits. APCA (the contrast method explored for WCAG 3) is still a draft and not legally referenced, so it is left out to keep results authoritative. It may be added once WCAG 3 stabilises.

How are translucent colors handled?

WCAG luminance is defined on solid colors, so any alpha is flattened first: the background is composited over white, then the text is composited over that background using the standard source-over rule. Enter an 8-digit hex or an rgba() value and the tool shows the resulting solid pairing it scored.

Developer · Accessibility

Color Contrast Checker — WCAG AA & AAA

Paste a text color and a background color to see the exact contrast ratio and whether it passes WCAG 2.1 AA and AAA — with a live preview and one-click fixes. No signup, runs entirely in your browser.

By Induwara Ashinsana— Executive Director, Ryzera TechnologiesUpdated Jun 8, 2026

Check color contrast

WCAG 2.1· AA & AAA

Text (foreground) color

Background color

Text size

Weight

Try a pairing

Contrast ratio

10.36 : 1

Passes AA and AAA for normal text (10.36 : 1). This pairing is fully accessible.

Live previewThe quick brown fox jumps over the lazy dog.1234567890 — sample body text at the selected size.

WCAG conformance

AA — Normal text

needs 4.5:1

AA — Large text

needs 3.0:1

AAA — Normal text

needs 7.0:1

AAA — Large text

needs 4.5:1

UI & graphics

needs 3.0:1

Thresholds and formulas from· runs entirely in your browser — nothing is uploaded.

How it works

The checker follows the contrast algorithm published by the World Wide Web Consortium in WCAG 2.1. It is the same maths used by accessibility auditors, browser dev-tools, and design systems, and it is the standard referenced by the EU Accessibility Act, US Section 508, and the ADA. Four steps take a color pair to a verdict:

Parse and flatten. Each input is parsed to 8-bit sRGB channels (hex, rgb(), hsl(), or a CSS name). If a color carries an alpha channel it is composited onto a solid color first — the background over white, the text over the background — because the WCAG luminance definition only applies to solid colors.
Linearise each channel. Normalise a channel to cs = c / 255, then apply the sRGB transfer function: cs / 12.92 when cs ≤ 0.04045, otherwise ((cs + 0.055) / 1.055) ^ 2.4.
Relative luminance. Combine the linear channels with the BT.709 weights: L = 0.2126·R + 0.7152·G + 0.0722·B. Green dominates because the human eye is most sensitive to it.
Contrast ratio. ratio = (L_lighter + 0.05) / (L_darker + 0.05), where the 0.05 term models ambient screen flare. The result runs from 1:1 (identical colors) to 21:1 (black on white).

The ratio is then compared against the fixed thresholds: 4.5:1 for normal text and 3:1 for large text at level AA (SC 1.4.3), 7:1 and 4.5:1 respectively at AAA (SC 1.4.6), and 3:1 for user-interface components and graphics (SC 1.4.11). Text counts as large at 18pt (≈24px) regular or 14pt (≈18.66px) bold, so picking a size and weight selects the right gate. To keep results trustworthy the same ratio is computed twice — once by the shared site color engine and once by an independent implementation of the W3C formula — and the two are asserted to agree to within 0.001 before the tool ships.

When a pair fails, the nudge to pass feature converts the color to HSL and binary-searches its lightness toward black or white (whichever raises contrast) until it reaches the next failing threshold, then reports the nearest compliant color. If no lightness on that axis can reach the target, it says so rather than offering a color that does not actually pass.

Worked examples

Black text on white — the maximum

#000000 on #FFFFFF

L(black) = 0, L(white) = 1.0
ratio = (1.0 + 0.05) / (0 + 0.05) = 1.05 / 0.05
= 21.00 : 1
Passes AA and AAA for all text sizes, and non-text. 21:1 is the highest ratio possible.

Mid-grey on white — the classic near-miss

#777777 on #FFFFFF

Grey channel 119/255 = 0.4667 → linearised 0.18448 (all channels equal, so L = 0.18448)
ratio = (1.0 + 0.05) / (0.18448 + 0.05) = 1.05 / 0.23448
= 4.48 : 1
Fails AA normal (needs 4.5:1) but passes AA large (≥ 3:1).
Nudge darkens the text to #767676 → 4.54:1, which now passes AA normal.

White on sapphire — this site's brand pair

#FFFFFF on #1E3A8A

Background linearised: R 0.01297, G 0.04229, B 0.25422
L(sapphire) = 0.2126·0.01297 + 0.7152·0.04229 + 0.0722·0.25422 = 0.05137
ratio = (1.0 + 0.05) / (0.05137 + 0.05) = 1.05 / 0.10137
= 10.36 : 1
Passes AA and AAA for both normal and large text — the brand pairing is accessible.

Frequently asked questions

Sources & references

The thresholds and formulas on this page were last cross-checked against the live W3C Recommendation on 2026-06-08. Values are reviewed whenever WCAG publishes an updated Recommendation.

Related tools

LiveDeveloper

IP Subnet Calculator

Enter an IPv4 address and CIDR prefix to get the network, broadcast, usable host range, subnet mask, wildcard, IP class and address type — and split a block into equal subnets. Pure bit math, all in the browser.

Open tool

LiveDeveloper