devprix.io

Color Contrast Checker Online

Enter a text colour and a background to get their WCAG contrast ratio and an instant pass or fail at AA and AAA for normal text, large text and UI components such as borders and icons. It reads hex, rgb(), hsl() and CSS colour names, with a colour picker beside each field and a live preview.

When a pair fails, DevPrix suggests the nearest text or background colour that passes, keeping the hue and changing only lightness, and applies it in one click. The check runs in your browser, so nothing is uploaded and you do not need an account.

#767676

#ffffff

Contrast ratio

4.54:1

Relative luminance 0.1812 (text) and 1.0000 (background)
WCAG 2.x results for a contrast ratio of 4.54:1
UseAAAAA
Normal textUnder 24px, or under 18.66px boldPass4.5:1Fail7:1
Large textAt least 24px, or 18.66px (14pt) boldPass3:1Pass4.5:1
UI components & graphicsBorders, icons, focus rings, chart lines (SC 1.4.11)Pass3:1No AAA level

Preview

Normal text, 16px. The quick brown fox jumps over the lazy dog.

Large text, 24px regular

Large text, 18.66px bold

For UI components the text colour stands in for a border, icon or focus ring drawn on the background.

Nearest passing colours

Change the text colour

AAAlready passes AA (4.5:1).
AAA#5959597.00:1 · darker

Change the background

AAAlready passes AA (4.5:1).
AAANo lighter or darker shade of this hue reaches 7:1 here. Change the text colour instead.

Suggestions keep the hue and change only lightness in OKLCH, a perceptual colour space; chroma is reduced only when a shade would fall outside sRGB. They are solid colours, checked after rounding to 8-bit hex.

4.54:1 — passes AA for normal textAAA normal text: failLarge text AA: passUI components: passProcessed locally

How to use it

  1. Enter or pick a text colour and a background: hex, rgb(), hsl() or a CSS colour name.
  2. Read the ratio and the AA and AAA results for normal text, large text and UI components, with a live preview.
  3. If it fails, apply the nearest passing colour, then press Copy result (⌘↵) to copy the summary.

Related tools

Color ConverterConvertHTML Color NamesReferenceTailwind CSS LookupCSSCSS Unit ConverterCSS

Next: convert the passing colour to RGB or HSL in the Color Converter, or browse the named CSS colours in HTML Color Names.

What this tool does

The checker uses the WCAG 2.x formula, the same in WCAG 2.0, 2.1 and 2.2. Each colour's sRGB channels are linearised (c / 12.92 at or below 0.04045, otherwise ((c + 0.055) / 1.055)^2.4) and combined into relative luminance, L = 0.2126 R + 0.7152 G + 0.0722 B, which runs from 0 for black to 1 for white. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), lighter over darker, from 1:1 to 21:1. The results follow three success criteria: 1.4.3 Contrast (Minimum, AA) needs 4.5:1 for normal text and 3:1 for large text; 1.4.6 Contrast (Enhanced, AAA) needs 7:1 and 4.5:1; and 1.4.11 Non-text Contrast (AA) needs 3:1 for the parts of controls and graphics people must see, such as input borders, icons, focus indicators and chart lines. Large text is at least 18pt (24px) or 14pt (about 18.66px) bold. The ratio is shown to two decimals, but a value just under a threshold is never rounded up to it: 4.496:1 shows as 4.49 and fails. A semi-transparent background is measured over white, and a semi-transparent text colour is blended with the background first, both rounded to 8-bit colour as a screen shows them. WCAG sets no contrast requirement for logos, pure decoration or the text of disabled controls.

Example input and output

#777777 on white: just under AA
Input
Text colour: #777777
Background:  #ffffff
Output
Contrast ratio: 4.48:1
Normal text: AA fail (needs 4.5:1), AAA fail (needs 7:1)
Large text: AA pass (needs 3:1), AAA fail (needs 4.5:1)
UI components & graphics: AA pass (needs 3:1)

Nearest passing text colour
AA   #767676  4.54:1  darker
AAA  #595959  7.00:1  darker

The exact ratio is 4.478:1, so it fails even though it looks close. One step darker, #767676, passes AA.

White text on a green button
Input
Text colour: #ffffff
Background:  #22c55e
Output
Contrast ratio: 2.28:1
Normal text: AA fail (needs 4.5:1), AAA fail (needs 7:1)
Large text: AA fail (needs 3:1), AAA fail (needs 4.5:1)
UI components & graphics: AA fail (needs 3:1)

Nearest passing background
AA   #00893c  4.52:1  darker
AAA  #00672b  7.06:1  darker

White cannot get any lighter, so the useful fix is a darker green behind it. Changing the text colour instead would mean dark grey text (#404040 for AA).

Semi-transparent text
Input
Text colour: rgba(0, 0, 0, 0.6)
Background:  #f5f5f5
Output
Text colour: #00000099 (shown as #626262)
Background: #f5f5f5
Contrast ratio: 5.59:1
Normal text: AA pass (needs 4.5:1), AAA fail (needs 7:1)
Large text: AA pass (needs 3:1), AAA pass (needs 4.5:1)
UI components & graphics: AA pass (needs 3:1)

60% black over #f5f5f5 is displayed as #626262, and that is the colour measured. On a different background the same rgba() value gives a different ratio.

Common errors and fixes

A hex colour has 3, 4, 6 or 8 hex digits
A digit is missing or there is a typo such as #12 or #ggg. Use #rgb, #rgba, #rrggbb or #rrggbbaa. For oklch(), lab() or color(), convert the colour to hex or rgb() first; those formats are not read here.
4.48:1 fails, but it rounds to 4.5
WCAG thresholds are minimums with no rounding: 4.499:1 does not meet 4.5:1. Apply the suggested colour, usually one or two steps darker or lighter, such as #767676 instead of #777777 on white.
With commas, rgb() channels must be all numbers or all percentages
rgb(100%, 0, 0) mixes the two, which browsers reject in the comma syntax. Write rgb(255, 0, 0), rgb(100%, 0%, 0%), or the space syntax rgb(100% 0 0), which allows mixing.
With commas, hsl() saturation and lightness need a % sign
hsl(24, 100, 50) is invalid CSS. Write hsl(24, 100%, 50%), or hsl(24 100 50) in the space-separated syntax, where plain numbers are allowed.
A translucent colour passes here but fails on the page
A semi-transparent background is measured over white. If the page behind it is dark, an image or a gradient, enter the solid colour that is actually behind the text, or check the lightest and darkest parts of the image.
The text passes, but the input border is hard to see
Borders, icons and focus rings fall under SC 1.4.11 and need 3:1 against the colour next to them. Enter the border colour as the text colour to check it; a pale grey border such as #e5e7eb on white is only about 1.2:1.

Common use cases

  • Checking text and background pairs in a design system or brand palette
  • Fixing contrast failures reported by Lighthouse, axe or an accessibility audit
  • Choosing link, button and badge colours that pass AA
  • Checking borders, icons and focus rings against the 3:1 non-text rule
  • Finding a darker or lighter shade of a brand colour that passes

Privacy and security notes

  • The colours you enter are checked by JavaScript in this browser tab. They are not sent to DevPrix or stored on a server.
  • The colour picker is your browser's own control, and Copy result puts a plain-text summary on your clipboard; nothing else leaves the page.
  • Share copies a link that carries your two colours after the # in the URL, and opening it fills them back in. Browsers do not send that part of a URL to servers.

Frequently asked questions

What counts as large text?

WCAG defines large text as at least 18 point, or 14 point bold. In CSS, 1pt is 1.333px, so that is 24px regular or about 18.66px bold. The size is the one you deliver, not what a reader gets by zooming in, and very thin typefaces can need more contrast than the minimum.

Does this tool use APCA or WCAG 3?

No. APCA, the Accessible Perceptual Contrast Algorithm, is being explored for WCAG 3, which is still a working draft. Its Lc scores are not comparable with WCAG 2 ratios. Laws and procurement standards today refer to WCAG 2.x, typically level AA, so this tool implements the WCAG 2.x formula only.

Why does 4.48:1 fail when it is so close to 4.5:1?

The thresholds are minimums and WCAG does not round. The ratio here is shown to two decimals and rounded normally, except that a value just below 3, 4.5 or 7 is never rounded up to it, so 4.496:1 shows as 4.49:1 rather than a misleading 4.50:1.

How are transparent colours handled?

A browser draws a semi-transparent colour by blending it with whatever is behind it. Here a translucent background is blended with white, and a translucent text colour with that background, both rounded to 8-bit colour. The colours actually measured are shown in the preview and the summary. For text over an image or gradient, check the lightest and darkest areas behind it.

How are the suggested colours chosen?

The tool converts the colour to OKLCH, a perceptual colour space, keeps its hue and chroma, and moves lightness up and down until the ratio passes. If a shade falls outside sRGB, chroma is reduced just enough to fit. The nearest passing shade is shown, checked again after rounding to hex. Suggestions are solid colours, even when you entered a transparent one.