What contrast ratio does text need under WCAG 2.1 and 2.2?

AA needs at least 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1 respectively. These text thresholds also appear in WCAG 2.0. Ratios range from 1:1 to 21:1. The tool uses the current corrected sRGB luminance breakpoint, 0.04045, and decides pass or fail before rounding the displayed ratio.

What counts as large text?

At least 18pt (24 CSS pixels), or 14pt bold (about 18.67 CSS pixels). The size toggle selects the threshold for suggestions; it does not change the numerical contrast ratio. The preview includes 24px bold and 16px normal text.

How does the checker handle opacity and RGBA colours?

Enter a foreground such as rgba(0, 0, 0, 0.5) on white. The background is first composited over the opaque Canvas colour, then the foreground is composited over that rendered background. Contrast uses the resulting fractional sRGB channels. A transparent foreground has a ratio of 1:1. The displayed hex codes are rounded, while the preview and verdict use the rendered channels. This models two colour layers, not opacity applied to an entire CSS element or a stack of image layers.

Which colour formats can I enter?

Three-, four-, six- and eight-digit hex with or without #; RGB numbers from 0 to 255 or percentages; RGB/RGBA comma notation or space notation with slash alpha; HSL/HSLA with hue in degrees; all 148 CSS colour names; and transparent. Alpha is 0 to 1 or 0% to 100%. HSL conversion resolves to 8-bit sRGB. Canvas must be opaque. Contextual values such as currentColor, wide-gamut functions, CSS variables and CMYK are not parsed.

How do I generate a passing contrast colour?

Choose normal or large text and AA or AAA. The suggested shades replace one field with an opaque hex colour while holding its hue and saturation and searching HSL lightness in 0.1-point steps, including black and white endpoints. Every suggestion is checked with the actual foreground/background layering. The search finds a passing grid shade, not a globally closest perceptual colour. If none reaches the chosen ratio, the button says so. Use Color Palette Generator for colour harmonies from one seed.

Can I check three colours or a complete brand palette?

Yes. Open Compare a palette, paste one colour per line or separate entries with semicolons, and inspect every distinct pair. Three distinct colours produce three comparisons; five produce ten. Each row shows the ratio and all four text verdicts plus the non-text 3:1 result. Equivalent rendered colours are combined. Palette alpha is flattened separately over the common canvas before comparison.

Does a 3:1 ratio mean my button or link is accessible?

For necessary interface boundaries, states and meaningful graphics, WCAG 1.4.11 asks for 3:1 against adjacent colours. Button text still needs the appropriate text threshold. Link text needs contrast against its background and a means beyond colour to distinguish it; this tool does not inspect underline, focus, keyboard use or other states. Text that is part of a logo or brand name is exempt from WCAG text contrast requirements. A numerical logo-pair result does not create a requirement or certify accessibility.

Does it check a website, image, gradient or PDF automatically?

It checks supplied solid colour pairs. It does not crawl URLs or extract text/background pairs from images, gradients or PDFs. For an image, use Image Color Picker to sample the actual text and adjacent background, then enter those values here. Different positions or states can need separate checks. A gradient endpoint check alone does not establish that every position passes.

Does this prove ADA or Section 508 compliance or simulate colour blindness?

No. WCAG contrast checks help with accessibility work, including reviews that reference ADA or Section 508, but a pair result does not establish compliance. Colour-vision simulation answers a separate question about distinguishability; use Color Blindness Simulator alongside these ratios. This checker does not calculate APCA or apply a draft WCAG 3 model.

Are these tools free, and what is stored?

The pair and palette checks run in this browser with no account or upload. Explicit pair edits, the canvas, size and suggestion level are saved locally; opening defaults does not create a saved draft. The supplied palette stays in this tab and is not stored. Clipboard copies contain the displayed results. Clearing browser storage removes the saved pair settings.

Color Contrast Checker

Compare text and background colours for web design, UI buttons, links and brand colour pairs. Enter hex, RGB, HSL or CSS names to see the WCAG 2.1 and 2.2 ratio, AA and AAA verdicts for normal and large text, and the 3:1 non-text threshold. Alpha in RGBA, HSLA or hex is composited over an explicit solid canvas. For a failing pair, choose AA or AAA and apply a suggested opaque shade. Compare multiple supplied colours on the palette page. These are colour checks for accessibility work, not a whole-site audit or a compliance certificate.

Sample#0B7A85 on #FFFFFF

Large text, 24px boldNormal text at sixteen pixels, the size most body copy is set at.#0B7A85 on #FFFFFF

RatioWCAG 2.1 and 2.2

5.08:1AA at both sizes, AAA large only

passAA normal text, needs 4.5
passAA large text, needs 3.0
failAAA normal text, needs 7.0
passAAA large text, needs 4.5
passNon-text elements, needs 3.0

Foreground

Background

Text size

Suggestion level

Canvas

An opaque canvas is required. Background alpha goes over the canvas; foreground alpha goes over that background.

This pair passes AA for normal text at 5.08:1. Large text means 24px, or 18.66px bold.

The non-text 3:1 result applies to necessary interface boundaries, states and meaningful graphics against adjacent colours (WCAG 1.4.11). A button label still needs the text threshold. Links also need a cue beyond colour; a pair ratio alone does not evaluate a link, logo or whole interface.

For an image, sample the actual text and background with Image Color Picker, then enter them here. Use Color Blindness Simulator for colour-vision views or Color Palette Generator for harmonies from a seed.

Pairs worth knowing

#767676 on #FFFFFFthe classic AA boundary
4.54:1 · AA at both sizes, AAA large only
#FFFFFF on #16191Bwhite on the tool stage
17.66:1 · AA and AAA at both sizes
#8A938F on #FFFFFFa muted label on white
3.16:1 · AA large text only

The WCAG 2.1 and 2.2 formula, not an approximation. Each channel is taken out of its sRGB gamma, weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue into a relative luminance, and the ratio is the lighter of the two plus 0.05 divided by the darker plus 0.05. That puts every pair between 1:1 and 21:1. AA asks for 4.5:1 on normal text and 3:1 on large text, AAA for 7:1 and 4.5:1, where large means 24px, or 18.66px bold. The pass and fail chips are decided on the exact ratio, not on the two decimal places shown, so a pair that reads 4.50 and still fails is a pair sitting just under the line.

Common questions

What contrast ratio does text need under WCAG 2.1 and 2.2?: AA needs at least 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1 respectively. These text thresholds also appear in WCAG 2.0. Ratios range from 1:1 to 21:1. The tool uses the current corrected sRGB luminance breakpoint, 0.04045, and decides pass or fail before rounding the displayed ratio.
What counts as large text?: At least 18pt (24 CSS pixels), or 14pt bold (about 18.67 CSS pixels). The size toggle selects the threshold for suggestions; it does not change the numerical contrast ratio. The preview includes 24px bold and 16px normal text.
How does the checker handle opacity and RGBA colours?: Enter a foreground such as rgba(0, 0, 0, 0.5) on white. The background is first composited over the opaque Canvas colour, then the foreground is composited over that rendered background. Contrast uses the resulting fractional sRGB channels. A transparent foreground has a ratio of 1:1. The displayed hex codes are rounded, while the preview and verdict use the rendered channels. This models two colour layers, not opacity applied to an entire CSS element or a stack of image layers.
Which colour formats can I enter?: Three-, four-, six- and eight-digit hex with or without #; RGB numbers from 0 to 255 or percentages; RGB/RGBA comma notation or space notation with slash alpha; HSL/HSLA with hue in degrees; all 148 CSS colour names; and transparent. Alpha is 0 to 1 or 0% to 100%. HSL conversion resolves to 8-bit sRGB. Canvas must be opaque. Contextual values such as currentColor, wide-gamut functions, CSS variables and CMYK are not parsed.
How do I generate a passing contrast colour?: Choose normal or large text and AA or AAA. The suggested shades replace one field with an opaque hex colour while holding its hue and saturation and searching HSL lightness in 0.1-point steps, including black and white endpoints. Every suggestion is checked with the actual foreground/background layering. The search finds a passing grid shade, not a globally closest perceptual colour. If none reaches the chosen ratio, the button says so. Use Color Palette Generator for colour harmonies from one seed.
Can I check three colours or a complete brand palette?: Yes. Open Compare a palette, paste one colour per line or separate entries with semicolons, and inspect every distinct pair. Three distinct colours produce three comparisons; five produce ten. Each row shows the ratio and all four text verdicts plus the non-text 3:1 result. Equivalent rendered colours are combined. Palette alpha is flattened separately over the common canvas before comparison.
Does a 3:1 ratio mean my button or link is accessible?: For necessary interface boundaries, states and meaningful graphics, WCAG 1.4.11 asks for 3:1 against adjacent colours. Button text still needs the appropriate text threshold. Link text needs contrast against its background and a means beyond colour to distinguish it; this tool does not inspect underline, focus, keyboard use or other states. Text that is part of a logo or brand name is exempt from WCAG text contrast requirements. A numerical logo-pair result does not create a requirement or certify accessibility.
Does it check a website, image, gradient or PDF automatically?: It checks supplied solid colour pairs. It does not crawl URLs or extract text/background pairs from images, gradients or PDFs. For an image, use Image Color Picker to sample the actual text and adjacent background, then enter those values here. Different positions or states can need separate checks. A gradient endpoint check alone does not establish that every position passes.
Does this prove ADA or Section 508 compliance or simulate colour blindness?: No. WCAG contrast checks help with accessibility work, including reviews that reference ADA or Section 508, but a pair result does not establish compliance. Colour-vision simulation answers a separate question about distinguishability; use Color Blindness Simulator alongside these ratios. This checker does not calculate APCA or apply a draft WCAG 3 model.
Are these tools free, and what is stored?: The pair and palette checks run in this browser with no account or upload. Explicit pair edits, the canvas, size and suggestion level are saved locally; opening defaults does not create a saved draft. The supplied palette stays in this tab and is not stored. Clipboard copies contain the displayed results. Clearing browser storage removes the saved pair settings.

WCAG 2.1 and 2.2 ratios for sRGB colour pairs, with AA and AAA verdicts for normal and large text. Alpha is composited over the supplied solid canvas. This does not judge a whole page, simulate colour vision or certify accessibility compliance.