Tool 5.5

WCAG 2.2 color contrast checker (AA & AAA)

Check the contrast ratio of a text color on its background against WCAG 2.2 AA and AAA, for normal text, large text and UI components. Runs in your browser.

Runs on your deviceRuns entirely in your browser: nothing you type or upload leaves your device.

How to use it

Enter the text color and the background color as hex, `rgb()` or a basic name, or choose them with the color picker.
Read the ratio and the table: normal text and large text at AA and AAA, and UI components.
Look at the preview, and use Swap colors or the presets to compare.

Who struggles with low-contrast text

Contrast is the difference in luminance, how light or dark a color looks, between text and its background. WCAG, the Web Content Accessibility Guidelines, measures it as a ratio from 1:1 (the same color twice) to 21:1 (black on white). Text below the minimums is hard or impossible to read for people with low vision or color blindness, for many older readers, and for anyone looking at a phone in the sun.

Enter the two colors as hex (#1a365d or #fff), as rgb(26, 54, 93) or as one of 20 basic names such as white or navy. The tool shows the ratio with two decimals, a pass or fail for each WCAG 2.2 row, and a preview of the text on that background. The calculation runs in your browser; the colors aren't sent anywhere.

Example: two greys one step apart

Grey #767676 on white gives 4.54 : 1. That passes AA for normal text (4.5 or more) and fails AAA for normal text (7 or more). It passes both levels for large text and the 3:1 row for UI components. It is the lightest grey that passes AA on white, which is why it is one of the presets.

Change it to #777777, one step lighter, and the ratio drops to 4.48 : 1: normal text now fails AA, and large text fails AAA. The tool compares the exact value, not the rounded one, as WCAG requires, so a pair shown as 4.50 : 1 can still fail if the real ratio is 4.497. For AAA on white the lightest grey is #595959 (7.00 : 1), while #999999, a common placeholder grey, gets 2.85 : 1 and fails every row.

What the ratio leaves out

Each field takes one solid color. Transparency is ignored: rgba(0, 0, 0, 0.5) or an 8-digit hex like #00000080 is checked as solid black, which overstates the contrast. For text over a photo, a gradient or a translucent panel, pick the lightest spot behind dark text (or the darkest behind light text) and check that color.

The ratio also ignores the font. A thin weight like 100 or 200 at small sizes can be hard to read even at 4.5:1, and the lower minimum for large text only applies from 18 pt, or 14 pt in bold.

FAQ

What is the difference between WCAG AA and AAA?

AA asks for 4.5:1 for normal text and 3:1 for large text; it is the level that accessibility rules and audits usually ask for. AAA asks for 7:1 and 4.5:1. The W3C doesn't recommend requiring AAA for a whole site, because some content can't meet all of its criteria.

What counts as large text in WCAG?

At least 18 pt (about 24 CSS pixels) at normal weight, or at least 14 pt (about 18.7 CSS pixels) in bold. Bigger letters have thicker strokes and stay readable with less contrast, so the AA minimum drops from 4.5:1 to 3:1.

My brand color fails. What can I change?

Keep the hue and make the text darker, or the background lighter, with the color picker until the row you need shows Pass. A color that only reaches 3:1 still works for large headings, icons and borders. White text on a button in your brand color has exactly the same ratio as that color on white: swapping the two doesn't change the result.

Does contrast apply to buttons and input fields?

Yes. Success criterion 1.4.11, Non-text Contrast, in WCAG 2.1 and 2.2 asks for 3:1 against the adjacent colors for what you need to see to use a control, such as input borders, checkbox outlines and focus indicators, and for icons that carry meaning. The last row of the table checks that 3:1.

Why does it say "Enter a valid color"?

The tool reads hex with 3, 6 or 8 digits (with or without `#`), `rgb()` and `rgba()` written with commas, and 20 basic names. It doesn't read `hsl()`, the newer `rgb(26 54 93)` form without commas, or names like `rebeccapurple`: convert those to hex first.

5.1JSON formatterFormat or minify JSON and find syntax errors by line and column.
5.2CSV to JSON converterConvert CSV to JSON or JSON to CSV with comma, semicolon or tab separators.
5.3YAML to JSON converterConvert YAML to JSON and back in your browser.
5.4Base64Encode or decode Base64 in your browser: UTF-8 text, URL-safe Base64, files to Base64 or data URLs, and Base64 back to a downloadable file.
5.6Cron explainerRead a 5-field cron expression as a plain sentence and see its next 5 run times in your time zone.
5.7Number base converterConvert whole numbers between decimal, hexadecimal, binary and octal, with bit length and grouped digits.
5.8HTML entity encoderEncode text as HTML entities (named, decimal or hex) or decode entities back to text: <, >, &, quotes, Spanish accents, Latin-1 symbols.
5.9URL encodePercent-encode or decode URLs and query values, and break any URL into protocol, host, path, query parameters and fragment.
5.10SHA-256 hashGet SHA-1, SHA-256, SHA-384 and SHA-512 hashes of text or files and verify a download against its published checksum.
5.11UUID generatorGenerate random UUID v4 or time-ordered UUID v7 (RFC 9562) in your browser, 1 to 1000 at a time, in uppercase or without dashes.
5.12Unix timestampConvert Unix timestamps in seconds or milliseconds to ISO 8601, UTC and your local time, or a date back to epoch.
5.13JWT decoderDecode a JSON Web Token in your browser: see the header and payload as formatted JSON and whether it has expired.
5.14Regex testerTest regular expressions live: highlighted matches, capture and named groups, flags and clear errors.

╌╌ END ╌╌