# Color Contrast Checker - WCAG 2.x AA/AAA and APCA Tester

> Check color contrast: WCAG 2.x ratio and APCA Lc, AA/AAA pass or fail for text and UI, nearest passing color, color-blindness preview and palette matrix.

- URL: https://qilingtools.com/en/color-contrast
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Design](https://qilingtools.com/en/tags/design), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

Low contrast between text and background makes reading hard for people with low vision, older readers and anyone using a phone in sunlight. Enter a text color and a background color — HEX, rgb(), hsl(), oklch() and common names all work, and the text color may be translucent — to get the WCAG 2.x contrast ratio with a pass or fail for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1) and graphics and UI components (1.4.11, 3:1). The APCA Lc value from the WCAG 3 draft (APCA-W3 0.1.9) is calculated alongside, with guidance for body text, headings, placeholders and other uses. When a pair fails, the tool changes only lightness in OKLCH, keeping the hue, and finds the smallest change that passes for either the text or the background — apply it with one click. The live preview shows body text, large text, a button and an icon at real sizes, and simulates how protanopia, deuteranopia, tritanopia and achromatopsia would see the pair using the Machado 2009 model. Palette matrix mode takes a whole set of brand colors and shows the contrast of every pairing at a glance.

## How to use

1. Type or pick the text color and the background color
2. Read the WCAG ratio, the pass/fail for each level and the APCA Lc value
3. If it fails, pick a target and apply the nearest passing color; switch to the palette matrix to check many colors at once

## Features

- WCAG 2.x ratio with AA, AAA, large-text and UI-component checks
- APCA-W3 0.1.9 Lc value with usage levels
- Nearest passing text or background color, lightness-only in OKLCH
- HEX, rgb(), hsl(), oklch() and translucent text colors
- Real-size preview of text, large text, button and icon
- Protanopia, deuteranopia, tritanopia and achromatopsia simulation
- Palette matrix of every color pairing

## FAQ

### What contrast ratio do WCAG AA and AAA require?

AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 for normal text and 4.5:1 for large text. Large text means at least 24px (18pt), or 18.66px (14pt) bold. Graphics and UI components such as button borders, icons and input outlines (success criterion 1.4.11) need at least 3:1. The exact value is used, so a ratio of 4.48:1 does not pass even though it rounds close to 4.5.

### How is APCA different from the WCAG 2.x ratio?

WCAG 2.x divides relative luminances, which is simple but too lenient on dark backgrounds and too strict in the mid tones. APCA, the method in the WCAG 3 draft, models perceived lightness contrast (Lc) and treats dark-on-light (positive) and light-on-dark (negative) differently, with minimum Lc values that depend on font size and weight. APCA is not a standard yet — legal requirements still use WCAG 2.x — so treat it as extra design guidance.

### How are the suggested colors found?

The color is converted to OKLCH and only its lightness is nudged up or down, keeping the hue and shrinking chroma when it would leave the sRGB gamut. The first passing color in each direction is found and the one with the smallest lightness change wins, so the suggestion looks as close as possible to your original and brand hues don’t drift.

### How accurate is the color-blindness simulation?

It uses the widely cited model by Machado, Oliveira and Fernandes (2009) in linear RGB, at full severity for protanopia, deuteranopia and tritanopia, while achromatopsia is shown as luminance-only grayscale. It is a good way to catch information that relies on color alone, but color vision varies from person to person, so also convey important information with text, icons or shapes.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: UTF-8 safe, optional URL-safe variant, convert text to Base64 and back in real time. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder with encodeURIComponent and encodeURI modes. Escapes Chinese, spaces and special characters. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free online JWT decoder: decode the header and payload of a JSON Web Token, show expiry and issued-at times, all locally without uploading the token.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free online hash calculator: SHA-1, SHA-256, SHA-384 and SHA-512 of text or any file through the browser crypto API. Files never leave your device.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create RFC 4122 UUID v4 in bulk with a cryptographic RNG. Options for uppercase, no hyphens and braces, with one-click copy.
- [Base Converter](https://qilingtools.com/en/base-convert): Free online number base converter: convert between binary, octal, decimal, hexadecimal and any base 2–36. Uses BigInt for huge integers, computed locally.