Ship & Quality · LOCAL TOOL

Color Contrast Checker

Calculate relative luminance and contrast ratio for two supported color values, then compare the result with common text-size thresholds.

Runs in this page
No API call

WORKSPACEINPUT → RESULT

Your input

LOCAL

Result

Run the tool to see a result.

Your result will appear here. Input is not saved.

Browser-side processingNothing is sent to a tool API.

WHY THIS TOOL EXISTS

A focused job, not a black box.

The result includes the numeric ratio and pass/fail labels for normal and large text instead of relying on a visual guess or color name.

How to use it

Enter foreground and background colors.
Choose the text-size class.
Review the ratio and adjust one color at a time.

TRY A WORKING EXAMPLE

Start with known input.

Load this sample into the workspace, run the tool, and compare the result shown below.

Show sample input

{
  "foreground": "#14211D",
  "background": "#F4F7F2",
  "size": "Normal text"
}

Expected sample result from the local tool

Contrast ratio 15.36:1 · WCAG AA pass for normal text.

{
  "ratio": 15.3618,
  "testClass": "normal text",
  "aaThreshold": 4.5,
  "aa": "pass",
  "aaaThreshold": 7,
  "aaa": "pass"
}

LIMITS AND INTERPRETATION

What the result cannot tell you.

The checker covers opaque hexadecimal and RGB colors. It does not resolve CSS variables, opacity compositing, images, gradients, or every non-text WCAG criterion.

Inputs are processed in this page and are not written to local storage.