How do I check several colours at once?

Enter one CSS colour per line, or separate colours with semicolons. Commas inside RGB and HSL functions stay in the same entry. All distinct unordered pairs appear, so four colours produce six rows. Reversing a solid pair gives the same ratio. The table scrolls horizontally on narrow screens.

Does every pair in my palette have to pass?

Only pairs used together need the applicable threshold. A palette can contain decorative colours that never appear as text or a necessary interface boundary. Decide which foreground/background combinations and states your design uses, then inspect those rows. A passing table does not evaluate an entire interface or certify compliance.

What happens to duplicates and transparent colours?

Equivalent rendered colours are combined. Every translucent entry is separately composited over the opaque Canvas colour before pairs are compared. This is different from placing translucent text directly over another translucent layer; use the pair inspector with the original notation for that layered calculation.

Can I fix a failing palette pair or copy all results?

Choose Use pair in a row to load its rendered colours into the inspector. Choose normal or large text and AA or AAA to request a passing opaque shade for one colour. Copy palette results copies all ratios and verdicts. Palette input is kept only in this tab; refreshing starts with the example palette.

Does this generate a palette or inspect an image automatically?

It compares colours you supply. Use Color Palette Generator for harmonies from a seed, or Image Color Picker to sample colours manually. No image, PDF, website URL, gradient or colour-vision audit is performed here.

Color Palette Contrast Checker

Paste brand or UI colours, one per line or separated by semicolons, to compare every distinct pair. Three colours make three comparisons and five make ten. Each row shows a text preview, WCAG 2.1 and 2.2 contrast ratio, AA and AAA verdicts for normal and large text, and the 3:1 non-text threshold. Select a row to inspect that pair and find passing shades. Transparent entries are flattened individually over the common canvas; the table compares those rendered solid colours.

Palette colours, one per line or separated by semicolons

Each colour is made solid over the canvas below, then every distinct pair is compared. Duplicates are combined. Palette text stays in this tab.

3 distinct colours · 3 pairs

Exact ratios decide verdicts; displayed ratios are rounded. Pair indices follow your colour list.
Pair	Sample	Ratio	AA normal	AA large	AAA normal	AAA large	Non-text 3:1
1 / 2 #FFFFFF / #000000	Aa	21:1	Pass	Pass	Pass	Pass	Pass
1 / 3 #FFFFFF / #767676	Aa	4.54:1	Pass	Pass	Fail	Pass	Pass
2 / 3 #000000 / #767676	Aa	4.62:1	Pass	Pass	Fail	Pass	Pass

Inspect a pair and find a passing shade

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

How do I check several colours at once?: Enter one CSS colour per line, or separate colours with semicolons. Commas inside RGB and HSL functions stay in the same entry. All distinct unordered pairs appear, so four colours produce six rows. Reversing a solid pair gives the same ratio. The table scrolls horizontally on narrow screens.
Does every pair in my palette have to pass?: Only pairs used together need the applicable threshold. A palette can contain decorative colours that never appear as text or a necessary interface boundary. Decide which foreground/background combinations and states your design uses, then inspect those rows. A passing table does not evaluate an entire interface or certify compliance.
What happens to duplicates and transparent colours?: Equivalent rendered colours are combined. Every translucent entry is separately composited over the opaque Canvas colour before pairs are compared. This is different from placing translucent text directly over another translucent layer; use the pair inspector with the original notation for that layered calculation.
Can I fix a failing palette pair or copy all results?: Choose Use pair in a row to load its rendered colours into the inspector. Choose normal or large text and AA or AAA to request a passing opaque shade for one colour. Copy palette results copies all ratios and verdicts. Palette input is kept only in this tab; refreshing starts with the example palette.
Does this generate a palette or inspect an image automatically?: It compares colours you supply. Use Color Palette Generator for harmonies from a seed, or Image Color Picker to sample colours manually. No image, PDF, website URL, gradient or colour-vision audit is performed here.

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.