Skip to content

Check color contrast (WCAG)

Check the contrast ratio of a text and background color against WCAG 2.2 AA and AAA, with the nearest passing color suggested; it runs in your browser.

Large text: 24 px regular or 18.66 px bold

Normal body text at 16 px needs at least 4.5:1 against its background to pass WCAG AA, and 7:1 for AAA.

Button outline
Contrast ratio17.16:1
  • AA Normal text ≥ 4.5:1 · SC 1.4.3Pass
  • AA Large text ≥ 3:1 · SC 1.4.3Pass
  • AAA Normal text ≥ 7:1 · SC 1.4.6Pass
  • AAA Large text ≥ 4.5:1 · SC 1.4.6Pass
  • AA UI components & graphics ≥ 3:1 · SC 1.4.11Pass

Every pair in your palette

Rows are backgrounds, columns are text colors. Select a cell to check that pair above.

Background3366ff33ccff6633ff33ffcccc33ffffffff000000
3366ff
33ccff
6633ff
33ffcc
cc33ff
ffffff
000000
Runs in your browser · no uploadHow it works

How to use Contrast checker

  1. 1

    Enter two colors

    Type the text color and the background color as HEX, rgb(), hsl() or oklch(), or open the round swatch to pick one.

  2. 2

    Read the verdict

    The ratio and five pass or fail rows show AA and AAA for normal and large text and the 3:1 rule for icons and borders.

  3. 3

    Apply a fix

    If a level fails, use the nearest darker or lighter text or background that passes, then copy the new value.

Limits and Pro

Free and unlimited: any number of checks, 5 WCAG 2.2 criteria per pair, 2 suggested fixes per failing level, and a grid of up to 7 colors.

About Contrast checker

This contrast checker measures how far apart two colors are in brightness using the relative-luminance formula from WCAG 2.2, the same calculation browser accessibility audits and design plugins use. The result is a ratio between 1:1 (identical) and 21:1 (black on white). Success criterion 1.4.3 asks for 4.5:1 for body text and 3:1 for large text at level AA; 1.4.6 raises that to 7:1 and 4.5:1 for AAA; 1.4.11 asks for 3:1 for meaningful non-text elements such as focus rings, input outlines and chart lines.

A live sample renders both sizes of text, an outlined button and an icon in your colors, so you can judge legibility as well as the number. Ratios are truncated to two decimals rather than rounded, because a pair at 4.496:1 does not meet a 4.5:1 requirement. When a level fails, the checker searches the OKLCH lightness of one color while keeping its hue and chroma, and proposes the nearest value that passes, for the text and the background separately.

The checker is for solid colors. It cannot evaluate text over photos or gradients, transparency, font weight rendering on a particular screen, or the newer APCA method proposed for WCAG 3, so treat a pass as the minimum and test real screens too.

Privacy

Both colors stay in this tab: the ratio, the pass and fail checks and the suggested fixes are calculated by your browser, and no color values are sent to a server or stored.

Contrast checker: frequently asked questions

What counts as large text in WCAG?
Large text is at least 18 point, which is 24 CSS pixels, at regular weight, or at least 14 point, about 18.66 CSS pixels, when bold. Text that size only needs 3:1 at level AA and 4.5:1 at AAA. Headings often qualify, while most buttons, labels and body copy use smaller sizes and therefore need the stricter 4.5:1 ratio.
Why does 4.48:1 fail when it rounds to 4.5?
WCAG states the thresholds as minimums and the understanding documents say values should not be rounded up. A ratio of 4.48:1 is below 4.5:1, so it fails level AA for normal text. This checker truncates the displayed number to two decimal places for the same reason, which keeps its verdict consistent with automated audits such as axe and Lighthouse.
Do icons and buttons need contrast too?
Yes. Success criterion 1.4.11 Non-text Contrast requires 3:1 between meaningful graphics and their surroundings: icons that convey information, the outline of a text field, the boundary of a button without a filled background, focus indicators and lines in charts. Decorative graphics and disabled controls are exempt. The sample in the checker shows an outlined button and an icon in your text color.
How does the checker choose a fixed color?
It converts the failing color to OKLCH, keeps the hue and chroma, and moves the lightness in small steps towards darker and towards lighter until the pair reaches the target. The closer of the two passing values is offered, once for the text and once for the background, so you can keep a brand color recognisable while meeting AA or AAA.
Is passing WCAG contrast enough for accessibility?
It is a minimum, not a guarantee. People with low vision, glare on a phone, thin fonts and color-only signals can still cause problems at a passing ratio. Combine sufficient contrast with readable font sizes, underlines or icons for links and states, and testing with real users. Contrast is one of many WCAG success criteria, so a full audit covers far more than color.

Other tasks with this tool

Related tools

All developer tools

CSS gradient & shadow generator

Design gradients and box shadows visually

Color picker from image

Pick exact colors and extract a palette from any image

App icon generator

Every iOS, Android and PWA icon size from one image

Favicon generator

ICO, PNG and manifest icons from an image, text or emoji