Skip to content
Marvin's Toolbox.

Search tools

Type to filter all tools

Color Contrast Checker

Check two colors against the WCAG contrast rules. Type or pick a text and a background color, read the contrast ratio, see which AA and AAA checks pass, preview real text at the sizes WCAG distinguishes, and get suggested fixes when a check fails.

Everything runs locally in your browser. Your data never leaves your device.

Colors

100%
100%

Result

Contrast ratio
3.67 : 1
Meets AA for large text and UI components only.
Normal text (AA)Fail

Needs 4.5:1. Body text below 24px (below 18.7px when bold). WCAG 1.4.3.

Large text (AA)Pass

Needs 3:1. Text from 24px, or bold text from 18.7px. WCAG 1.4.3.

UI components (AA)Pass

Needs 3:1. Icons, input borders, focus rings and chart elements. WCAG 1.4.11.

Normal text (AAA)Fail

Needs 7:1. Body text at the stricter enhanced level. WCAG 1.4.6.

Large text (AAA)Fail

Needs 4.5:1. Large text at the stricter enhanced level. WCAG 1.4.6.

Preview

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Button

Normal text at 16px, large text at 24px, bold large text at 18.7px, and a non-text UI sample. The panel sits on white, matching how translucent colors are measured.

Make it pass

The closest text colors that reach each failing level, keeping your hue and adjusting only the lightness.

Normal text (AA), large text (AAA)
#1d6ff5 reaches 4.52:1, needs 4.5:1
Normal text (AAA)
#0951c5 reaches 7.01:1, needs 7:1

Next steps

Keep going. These tools open with your result loaded in.

Convert a color between HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH and OKLAB. Type into any field and the others update as you go, or pick the color visually. Reads CSS color syntax and keeps alpha where the format supports it.

Convert text into every case at once: title case in the APA, AP, Chicago, MLA, Bluebook, AMA and NYT styles, sentence case, upper, lower, camelCase, snake_case, kebab-case and more, each with its own copy button.

Count words, characters, sentences, paragraphs, lines and more as you type, with estimated reading and speaking time.

Remove duplicate lines from a list or text, keeping the first occurrence. Optionally ignore case and whitespace, or drop blank lines too.

Replace text in two modes: plain find and replace all, or regular expressions with flag controls and capture group references like $1.

Paste a UUID to see what it carries: version, variant, and for time-based versions the exact timestamp, clock sequence and node. Also shows the raw bytes, the 128-bit integer and the URN form.

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly and reads URL-safe Base64 too.

Sort the lines of a text alphabetically, naturally, by length, by numeric value or shuffled. Reverse the order with a switch, and optionally trim lines, drop blank lines and remove duplicates in the same pass.

Check two colors against the WCAG contrast rules. Type or pick a text and a background color, read the contrast ratio, see which AA and AAA checks pass, preview real text at the sizes WCAG distinguishes, and get suggested fixes when a check fails.

Create a QR code for text, a link, an email, a phone number, an SMS, Wi-Fi access or a contact card. Set the error correction level, size, margin and colors, then download it as PNG or SVG or copy it straight to the clipboard.

Paste a cron expression and get a plain English explanation, a field by field breakdown and the next times it would run, in your local timezone or UTC. Reads five field crontab syntax, six fields with seconds, names like MON and macros like @daily.

Work out an IPv4 or IPv6 network from an address with a prefix or netmask: network and broadcast addresses, usable host range, subnet mask, wildcard mask and address type. Adjust the prefix with a slider, read the binary breakdown, and split the network into smaller subnets.

About the Color Contrast Checker

This tool checks whether a text color and a background color have enough contrast to meet the WCAG accessibility guidelines. Enter both colors in any CSS notation, or pick them visually, and read the contrast ratio next to a pass or fail verdict for every WCAG check.

The checks cover level AA and the stricter AAA, each for normal and for large text, plus the 3:1 minimum for icons, borders and other UI components. A live preview shows your own sample text at the exact sizes the guideline distinguishes, and when a check fails the tool suggests the closest shade of your text color that passes.

What you can do

  • Check a color pair against WCAG AA and AAA for normal and large text.
  • Check the 3:1 contrast minimum for icons and UI components.
  • See the contrast ratio for any two CSS colors, from HEX to OKLCH.
  • Preview sample text at the sizes WCAG distinguishes.
  • Get the closest passing shade of your text color when a check fails.
  • Check translucent colors, blended the way a browser renders them.

How to use the Color Contrast Checker

  1. 1Enter the text color and the background color in any CSS notation, or pick them with the color pickers.
  2. 2Read the contrast ratio and the pass or fail result for each WCAG check.
  3. 3If a check fails, apply one of the suggested text colors, or adjust the colors until everything you need passes.

What the WCAG levels mean

WCAG grades contrast at two levels. AA is what most laws and audits require: normal text needs a ratio of at least 4.5:1 and large text at least 3:1. AAA is the stricter enhanced level, asking 7:1 for normal text and 4.5:1 for large text. Large text means at least 24px, or at least about 18.7px when bold. Non-text elements like icons, input borders and focus indicators need at least 3:1 under the separate WCAG 1.4.11 criterion.

A ratio runs from 1:1 for identical colors to 21:1 for black on white. A mid-gray background caps how far any text color can get, so when even the suggestions cannot reach a level, the background itself has to change.

How the ratio is calculated

The ratio compares the relative luminance of the two colors using the exact formula from the WCAG specification, so the results match browser audit tools like Lighthouse. Colors with an alpha channel are blended first, the background over white and the text color over the blended background, because WCAG measures the colors as they end up on screen.

To translate either color into another notation, send it to the Color Converter.

Convert a color between HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH and OKLAB. Type into any field and the others update as you go, or pick the color visually. Reads CSS color syntax and keeps alpha where the format supports it.

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly and reads URL-safe Base64 too.

See what your clipboard really holds. One press lists every format on it, from plain text and HTML to Excel tables and images, each with its type, size and a preview. Pasting works too, and can reveal even more formats.

Convert config and data between JSON, YAML, TOML, JSON5, INI, XML, CSV and .env. Type or paste on the left, pick the output format on the right, and copy the result. Includes a format button and a minify toggle.

Paste a cron expression and get a plain English explanation, a field by field breakdown and the next times it would run, in your local timezone or UTC. Reads five field crontab syntax, six fields with seconds, names like MON and macros like @daily.

Remove duplicate lines from a list or text, keeping the first occurrence. Optionally ignore case and whitespace, or drop blank lines too.