Handitab

Color Contrast Checker

Check the contrast ratio between a text color and a background color against WCAG 2.1 AA and AAA thresholds, with a live preview.

About Color Contrast Checker

Contrast ratio is the WCAG measure of how distinguishable text is from its background, ranging from 1:1 to 21:1. This tool computes the relative luminance of both sRGB colors with the WCAG 2.1 formula, then divides the lighter value plus 0.05 by the darker value plus 0.05. It checks the result against the AA thresholds (4.5:1 for normal text, 3:1 for large text) and the AAA thresholds (7:1 and 4.5:1). Transparency is ignored.

How to use Color Contrast Checker

  1. Fill in "Text color" and "Background color".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about Color Contrast Checker

What counts as large text in WCAG?

Large text is at least 18 point (24 CSS pixels) at regular weight, or at least 14 point (about 18.66 CSS pixels) in bold. It may use the lower 3:1 ratio at level AA.

What contrast ratio do I need to meet WCAG AA?

Normal body text needs at least 4.5:1 against its background, and large text needs 3:1. User interface components and meaningful graphics need 3:1 under success criterion 1.4.11.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
Color ConverterConvert a color between HEX, RGB, and HSL notation, including alpha values, by entering any CSS color code and copying the others.Color MixerMix two colors in any ratio from 0 to 100 percent and get the blended color as HEX, RGB, and HSL codes, calculated channel by channel.Color PickerPick a color with the color picker built into your browser and copy its code in HEX, RGB, or HSL for use in CSS or a design tool.Color Shades GeneratorGenerate 3 to 15 shades of one base color from light to dark, keeping its hue and saturation, with a HEX code and swatch for each step.CSS Animation GeneratorGenerate a CSS keyframe animation such as fade, slide, zoom, bounce, pulse, shake, or spin with duration, delay, and easing options.CSS Background Pattern GeneratorGenerate a repeating CSS background pattern (stripes, dots, grid lines, checkerboard, or diagonal lines) from two colors and a size.