# Colour Contrast Checker - WCAG 2.2 Contrast Ratio, AA and AAA, with a Suggested Fix

Page: https://hirantha.me/tools/color-contrast-checker
Part of: Hirantha Sandaruwan Lakshan free tools (https://hirantha.me/tools)
Updated: 2026-10-13

Check the WCAG contrast ratio of a text and background colour, see AA and AAA pass or fail for normal and large text, and get the nearest colour that passes.

This is a free tool that runs in the browser: open the page to use it. File tools process files on the visitor's own device; files are never uploaded or stored. No account, sign-up, payment or watermark.

Enter a text colour and a background colour as hex, rgb(), hsl() or a colour name. You get the contrast ratio from 1:1 to 21:1, a pass or fail for WCAG AA and AAA with normal text, large text and user interface parts, a live preview, and the nearest text colour that passes if yours does not. The relative luminance formula is the one in WCAG 2.2, and the working is shown if you want to check it.

WCAG 2.2 defines the contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker. Relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B. Each channel R, G and B comes from the 8-bit value divided by 255 (call it c): if c is 0.04045 or less the channel is c / 12.92, otherwise it is ((c + 0.055) / 1.055) raised to the power 2.4. The weights reflect how bright the eye finds red, green and blue, which is why a pure green looks far lighter than a pure blue of the same value. Before May 2021 the WCAG text gave the threshold as 0.03928; the two give the same result for 8-bit colours.

The ratio decides the result, and it is never rounded up. W3C says that 4.499:1 does not meet 4.5:1, so the tool compares the exact figure and, when a rounded display would claim a pass that the exact figure does not earn, shows extra decimals. The levels are: AA needs 4.5:1 for normal text (success criterion 1.4.3) and 3:1 for large text, AAA needs 7:1 for normal text and 4.5:1 for large text (1.4.6), and user interface components and graphics such as input borders and icons need 3:1 against their neighbours (1.4.11). Large text means 18 point (24px) or more, or 14 point (about 18.7px) or more in bold.

To suggest a fix, the tool keeps the hue and saturation of your text colour and changes only its HSL lightness, in 0.1% steps, in both directions. It stops at the first lightness that reaches the level you pick, refines that step, and tests the colour after rounding to whole 0 to 255 channels so the colour you see really passes. It offers the nearer of the two directions and the other one if it exists. If even pure black and pure white cannot reach the level you pick, no colour can, and the tool says so and shows the best ratio possible on that background. HSL is used because it keeps the colour a designer chose recognisable and because lightness moves luminance in one direction only, which makes the search exact. OKLCH matches perceived lightness better but needs gamut mapping, so it is not used.

A background with transparency is blended over white before measuring, and a text colour with transparency is blended over the resulting background, because WCAG measures opaque colours. This checks WCAG 2.x only. WCAG 3.0 is still a W3C Working Draft (the version read when this page was written is dated 10 September 2026), and APCA, a perceptual contrast method that has been discussed for it, gives different numbers that depend on font size and weight. Neither is implemented here. Contrast is also only part of readable text: it says nothing about colour blindness, text over photos or gradients, or hover and focus states, which need their own checks.

WCAG 2.2 contrast requirements used by this tool:
| Level | What it covers | Minimum ratio | Success criterion |
| --- | --- | --- | --- |
| AA | Normal text | 4.5:1 | 1.4.3 Contrast (Minimum) |
| AA | Large text: 18 point (24px) or 14 point (about 18.7px) bold | 3:1 | 1.4.3 Contrast (Minimum) |
| AA | User interface components and graphics that carry meaning | 3:1 | 1.4.11 Non-text Contrast |
| AAA | Normal text | 7:1 | 1.4.6 Contrast (Enhanced) |
| AAA | Large text | 4.5:1 | 1.4.6 Contrast (Enhanced) |
| None | Logos and brand names, pure decoration, inactive controls | No requirement | Exceptions in 1.4.3 |

Q: What contrast ratio do I need for text?
A: To meet WCAG level AA, normal text needs at least 4.5:1 against its background and large text needs at least 3:1. For the stricter level AAA it is 7:1 for normal text and 4.5:1 for large text. AA is the level most sites aim for.

Q: What counts as large text?
A: WCAG defines large-scale text as at least 18 point, or at least 14 point if it is bold. In CSS pixels that is about 24px, or about 18.7px bold. Anything smaller is normal text and needs the higher ratio.

Q: Can I round 4.499 up to 4.5?
A: No. W3C is explicit that a computed value is not rounded, so 4.499:1 does not meet 4.5:1. This tool compares the exact ratio, and shows more decimals when the usual two would make a failing pair look like a pass.

Q: Do disabled buttons, logos and decorative text need contrast?
A: WCAG 1.4.3 exempts text that is part of an inactive user interface component, text that is pure decoration, and text that is part of a logo or brand name. Everything else that is visible text needs the ratio, and interface parts that are needed to find or use a control fall under the 3:1 rule of 1.4.11.

Q: Why does my text colour with transparency show a different ratio?
A: A semi-transparent colour has no single colour until it is drawn over something. The tool blends the text colour over the background, and a transparent background over white, and measures the blended result. If the real background behind your page is different, enter the colour you actually see.

Q: Is this the same as APCA or WCAG 3?
A: No. This is the WCAG 2.x method, the one defined in the current WCAG 2.2 recommendation. WCAG 3.0 is still a W3C Working Draft, and APCA is a different, perceptual way of measuring contrast whose answers depend on text size and weight and can differ from the 2.x ratio for the same two colours. Neither is implemented here.

Q: Which colour formats can I type?
A: Hex codes with 3, 4, 6 or 8 digits, rgb() and rgba() with commas or spaces, hsl() and hsla(), the 148 named CSS colours such as rebeccapurple, and transparent. Newer colour functions such as oklch() and variables such as var(--brand) cannot be read, so convert them to hex first.

Sources: WCAG 2.2: relative luminance (W3C) (https://www.w3.org/TR/WCAG22/#dfn-relative-luminance); WCAG 2.2: contrast ratio (W3C) (https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio); WCAG 2.2: 1.4.3 Contrast (Minimum) (W3C) (https://www.w3.org/TR/WCAG22/#contrast-minimum); WCAG 2.2: 1.4.6 Contrast (Enhanced) (W3C) (https://www.w3.org/TR/WCAG22/#contrast-enhanced); WCAG 2.2: 1.4.11 Non-text Contrast (W3C) (https://www.w3.org/TR/WCAG22/#non-text-contrast); Understanding SC 1.4.3: no rounding of ratios (W3C) (https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html); CSS Color Module Level 4: named colors (W3C) (https://www.w3.org/TR/css-color-4/#named-colors); W3C Accessibility Guidelines (WCAG) 3.0, Working Draft (https://www.w3.org/TR/wcag-3.0/); Contrast and Color Accessibility (WebAIM) (https://webaim.org/articles/contrast/)

Related tools:

- [Colour converter](https://hirantha.me/tools/color-converter.md): Convert a colour between HEX, RGB, and HSL.
- [CSS gradient generator](https://hirantha.me/tools/css-gradient-generator.md): Build linear, radial and conic CSS gradients with any number of colour stops, a live preview and copy-ready code. Repeating gradients and oklch blending included.
- [CSS box-shadow generator](https://hirantha.me/tools/box-shadow-generator.md): Design CSS box-shadows with layers, offset, blur, spread, opacity and inset, watch them live, then copy the code. Text-shadow mode and presets are included.
- [CSS minifier and beautifier](https://hirantha.me/tools/css-minifier.md): Minify CSS in your browser: strip comments and white space safely, shorten values, and see the bytes saved. Or beautify minified CSS back into readable code.
- [px to rem and em converter](https://hirantha.me/tools/px-to-rem-converter.md): Convert px to rem and em, and back, with your own root font size, or rewrite every px in a block of CSS to rem. Includes a px to rem table for common sizes.