What contrast ratio is needed for WCAG AA?

At least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). AAA raises these to 7:1 and 4.5:1. Buttons, form borders, focus rings and icons that carry meaning need 3:1 against adjacent colours.

Why does #777 fail on white?

Medium grey #777777 on white gives 4.48:1, just under the 4.5:1 AA threshold for normal text. #767676 is the lightest neutral grey that passes on white, which is why it appears so often in design systems.

Does text colour on background count, or background on text?

The order does not matter. The ratio always puts the lighter colour's luminance on top, so black on white and white on black are both 21:1. Swap in this tool only changes which colour the sample renders as text.

Is WCAG contrast the same as APCA?

No. APCA is a newer perceptual model proposed for WCAG 3 that scores text differently depending on which colour is the foreground and on font size and weight. WCAG 2 contrast ratio is what current accessibility law and audits require.

Contrast Checker

Contrast ratio of text on a background, against WCAG AA and AAA.

About Contrast Checker

A contrast checker that gives the WCAG 2 contrast ratio between a text colour and a background, pass or fail for AA and AAA, and a fix when normal text fails.

How to use

Set the text colour and the background with the swatches, or type a hex, rgb() or hsl() value. The ratio updates as you type.
Read the ratio and the table: AA and AAA for normal and large text, and the 3:1 threshold for UI components and graphics.
Check the sample block, which renders normal and large text in the chosen colours.
If AA fails for normal text, the suggested colour is the nearest lighter or darker shade of the same hue that passes; Use it applies it. Swap exchanges the two colours.

What it does

Computes relative luminance per the WCAG 2.1 formula: each sRGB channel is linearised (divided by 12.92 below 0.03928, otherwise ((c + 0.055) / 1.055)^2.4) and weighted 0.2126 R, 0.7152 G, 0.0722 B. The ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter colour on top, from 1:1 to 21:1.
Thresholds: AA needs 4.5:1 for normal text and 3:1 for large text (criterion 1.4.3); AAA needs 7:1 and 4.5:1 (1.4.6); user-interface components, focus indicators and meaningful graphics need 3:1 (1.4.11). Large text means at least 24px, or 18.66px bold.
Alpha is ignored. A semi-transparent colour has to be flattened onto its actual background before the ratio means anything, so pass the resulting opaque colour.
The suggestion keeps the hue and saturation of the text colour and steps its lightness one percent at a time away from the background until 4.5:1 is reached.

Example

#777777 on #FFFFFF → 4.48:1
AA normal: Fail · AA large: Pass · AAA normal: Fail · AAA large: Fail · UI: Pass
Suggested text colour: #757575 (4.61:1)

Privacy

The ratio is computed in the browser. No request is made, and nothing is stored.

Frequently asked questions

What contrast ratio is needed for WCAG AA?: At least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). AAA raises these to 7:1 and 4.5:1. Buttons, form borders, focus rings and icons that carry meaning need 3:1 against adjacent colours.
Why does #777 fail on white?: Medium grey #777777 on white gives 4.48:1, just under the 4.5:1 AA threshold for normal text. #767676 is the lightest neutral grey that passes on white, which is why it appears so often in design systems.
Does text colour on background count, or background on text?: The order does not matter. The ratio always puts the lighter colour's luminance on top, so black on white and white on black are both 21:1. Swap in this tool only changes which colour the sample renders as text.
Is WCAG contrast the same as APCA?: No. APCA is a newer perceptual model proposed for WCAG 3 that scores text differently depending on which colour is the foreground and on font size and weight. WCAG 2 contrast ratio is what current accessibility law and audits require.

Encode & decode

GUID Generator: One or many UUIDs, version 4 or 7.
ULID Generator: Sortable 26-character IDs with a time prefix.
Password Generator: Random passwords with length and character-set controls.
Hash Generator: MD5, SHA-1, SHA-256, SHA-384, SHA-512 and HMAC for text or a file.
Base64 Encoder / Decoder: Base64, Base32 and Base58 in both directions.
ROT13 / Caesar Cipher: Shift letters by any amount, or ROT13 in one click.
JWT Decoder: Read a token’s header and payload without sending it anywhere.
URL Encoder / Decoder: Percent-encode text for URLs, or decode it back.
HTML Entities: Escape &, < and > for HTML, or unescape them.
Base64 Image Encoder: Image to a Base64 data URL for CSS or HTML, or decode one back.
Random Number Generator: Random integers in a range, one or many, with or without repeats.
Bcrypt Generator: Hash a password with bcrypt, or check one against a hash.
AES Encrypt / Decrypt: Encrypt text with a passphrase using AES-256-GCM, or decrypt it.
Morse Code Translator: Text to dots and dashes, and back.

Data formats

XML ⇄ JSON: Convert between XML and JSON, from text or a file.
YAML ⇄ JSON: Convert between YAML and JSON, from text or a file.
CSV ⇄ JSON: Convert between CSV and JSON, from text or a file.
JSON to TypeScript: Infer TypeScript interfaces from a JSON sample.
JSON to Python Dataclass: Infer Python dataclasses from a JSON sample.
JSON to Pydantic Model: Infer Pydantic models from a JSON sample.
JSON to Go Struct: Infer Go structs with json tags from a JSON sample.
JSON to Rust Struct: Infer Rust structs with serde derives from a JSON sample.
JSON to Kotlin: Infer Kotlin data classes from a JSON sample.
JSON to C# Class: Infer C# classes from a JSON sample.
Base Number Converter: Binary, octal, decimal, hex and any base up to 36.
Text ⇄ Binary / Hex: Text to binary, hex, octal or decimal, and back.
Unix ⇄ UTC: Epoch seconds or milliseconds to a readable date, and back.
Timezone Converter: Convert a time between cities, with DST handled.
Cron Converter: Describe a schedule in words and get the cron expression.
Cron Expression Parser: Explain a cron expression in words and list its next run times.
Days Between Dates: The exact time between two dates, in days, weeks, months and years.
Age Calculator: Exact age in years, months and days, and the next birthday.
Epoch Clock: The current Unix timestamp, live, in seconds and milliseconds.
CIDR / Subnet Calculator: Network, broadcast, mask and host count for an IPv4 CIDR block.
Chmod Calculator: File permissions as octal (755) or symbolic (rwxr-xr-x).

Units & measures

Angle: Degrees, radians, gradians and turns.
Area: Square metres, feet, acres and hectares.
Bits / Bytes: Bits, bytes and every prefix up to petabytes.
Energy: Joules, calories, kilowatt-hours and BTU.
Frequency: Hertz, kilohertz, megahertz and RPM.
Fuel Economy: Miles per gallon, km per litre and litres per 100 km.
Length: Metres, feet, miles, inches and nautical miles.
Power: Watts, kilowatts and horsepower.
Pressure: Pascals, bar, PSI and atmospheres.
Speed: km/h, mph, knots and metres per second.
Temperature: Celsius, Fahrenheit and Kelvin.
Time Unit: Seconds, minutes, hours, days and beyond.
Volume: Litres, gallons, pints and cubic metres.
Weight: Kilograms, pounds, ounces and stone.

Text & code

Lorem Ipsum Generator: Placeholder paragraphs, sentences or words.
Slug Generator: Turn a title into a URL-safe slug.
Text Compare: Diff by line, word or character, unified or side by side.
URL Parser: Break a URL into host, path, query and fragment.
JSON Formatter & Validator: Validate, pretty-print or minify JSON.
JSON Diff: Compare two JSON documents, ignoring key order and formatting.
JSONPath Tester: Query JSON with a JSONPath expression.
SQL Formatter: Format and indent SQL for any dialect.
JavaScript Beautifier: Format minified or messy JavaScript into readable code.
HTML Formatter: Indent and tidy HTML, or strip it down to one line.
XML Formatter: Pretty-print or minify XML, with error positions.
CSS Minifier / Beautifier: Minify CSS, or expand it back to readable rules.
HTML to Markdown: Convert HTML to clean Markdown.
Text Case Converter: camelCase, snake_case, kebab-case, Title Case and more.
Markdown Previewer: Render Markdown as you type.
Whitespace Remover: Strip line breaks, extra spaces or both.
Sort Lines: Sort lines alphabetically, numerically, by length or reversed.
Duplicate Line Remover: Keep each line once.
String Counter: Characters, words, lines and bytes.
Regex Tester: Test a pattern against text with live matches.
Regex Cheatsheet: Regular-expression syntax with examples.

Word play

Palindrome Checker: Does it read the same backwards?
String Reverser / Rotator: Reverse a string or rotate it by n characters.
Roman Numeral Converter: 1984 ⇄ MCMLXXXIV.
NATO Phonetic Alphabet: Spell text out as Alfa, Bravo, Charlie.
Pig Latin Converter: English to Pig Latin and back.
Numeronym Generator: internationalization → i18n.
Leetspeak Translator: Text to l33t and back.
Word Frequency Counter: Which words appear most, and how often.

Images & colour

QR Code Generator: QR codes for text, links, Wi-Fi and contacts.
Barcode Generator: EAN, UPC, Code 128 and more as SVG or PNG.
Barcode / QR Reader: Decode a barcode or QR code from an image.
Color Picker: Pick a colour and copy it in every format.
Image Converter: Convert between PNG, JPEG and WebP, and resize on the way.
Contrast Checker: Contrast ratio of text on a background, against WCAG AA and AAA.
Favicon Generator: Every favicon size from one image.
Image Compressor: Shrink a JPEG, PNG or WebP in the browser.
Gradient Generator: Build a CSS gradient and copy the rule.
Box Shadow Generator: Tune a shadow and copy the CSS.

Reference

ASCII Table: Every ASCII character with its decimal, hex, octal, binary and HTML code.
HTTP Status Codes: Every HTTP status code with what it means and when to use it.
MIME Types: Common MIME types by file extension, searchable.
Port Numbers: Well-known and registered TCP and UDP ports and the services behind them.