DevToolBox
Skip to content
Categories

Color Contrast Checker

Calculate the contrast ratio between a foreground and background color and check it against the WCAG AA/AAA criteria.

Contrast preview sample

Overview

  • Calculates the contrast ratio between a foreground (text) color and a background color, based on the formula defined in WCAG 2.1.

  • Checks whether the calculated ratio meets the AA (minimum) and AAA (enhanced) criteria for both normal text and large text.

  • Supports #RRGGBB, rgb(r, g, b), and hsl(h, s%, l%) formats.

Usage

  1. Enter the foreground (text) color and the background color.

  2. Click the "Check" button.

  3. The contrast ratio and whether it passes the AA/AAA criteria for normal and large text are displayed.

Example

Input

Foreground: #000000, Background: #FFFFFF

Output

21.00:1 (passes both AA and AAA)

Use Cases

  • Checking whether a text/background color combination on a website meets accessibility standards

  • Verifying that a color scheme in a design mockup has visually readable contrast

  • Checking that colors still meet WCAG criteria when renewing the color scheme of an existing site

FAQ

What's the difference between the AA and AAA criteria?

AA is the minimum standard most websites should meet (4.5:1 for normal text, 3:1 for large text), while AAA is a stricter, recommended standard for higher accessibility (7:1 for normal text, 4.5:1 for large text).

What size counts as "large text"?

WCAG defines "large text" as 18pt (about 24px) or larger, or 14pt (about 18.66px) or larger if bold.

Are colors with transparency (alpha) calculated correctly?

Yes. The alpha value of the text color (rgba() or hsla()) is blended with the background color, and the contrast is calculated using the color that is actually visible. If the background color is semi-transparent, its appearance depends on what is underneath, so enter the opaque color after blending.

Notes

  • All calculation happens entirely in your browser, and the color values you enter are never sent anywhere.

  • This tool only calculates contrast between two flat colors. If your background uses a gradient or an image, check the actual appearance separately.

Related Tools

Color Converter

Convert color codes between HEX, RGB, and HSL.

Recommended
Color Blindness Simulator

Simulate how a color appears to people with protanopia, deuteranopia, tritanopia, or achromatopsia.

Color Palette Generator

Generate shade variations plus complementary, analogous, and triadic color palettes from a base color.

CSS Gradient Generator

Generate linear-gradient or radial-gradient CSS from colors and positions.