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.

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.

convertercolordev

Text Case Converter

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.

textconverter

Word & Character Counter

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

text

Dedupe Lines

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

textdev

Find and Replace

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

textdev

Text Diff

Compare two texts and see every added, removed and changed line highlighted, side by side or inline, with the changed words marked within each line. Ignore case, whitespace or blank lines, read a summary of how much changed, and export the result as a unified diff.

textdev

UUID Decoder

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.

devuuid

Base64 Encoder & Decoder

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, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Number Base Converter

Convert numbers between binary, octal, decimal, hexadecimal and any base up to 36. Type into any field and the others update as you go. Handles huge integers without losing precision and accepts 0x, 0b and 0o prefixes.

devconvertercalculator

About the Color Contrast Checker Tool

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.

Related tools

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.

convertercolordev

Color Palette Generator

Generate color palettes from a base color using real color harmonies like complementary, analogous, triadic and monochromatic tints and shades. Adjust and lock individual colors, then copy the palette as HEX values, CSS variables or Tailwind config.

devcolor

CSS Gradient Generator

Build linear, radial and conic CSS gradients visually: add and drag color stops, set the angle or center, preview the result live and copy the generated CSS. Includes ready-made presets to start from.

devcolor

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculatorimagedev

Barcode Generator

Create barcodes in dozens of formats, from EAN-13, UPC-A and Code 128 to QR Code, Data Matrix and PDF417. Type the content, tune the size, colors and text options, and download the result as PNG or SVG.

mediaimagedev

Base64 Encoder & Decoder

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, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext