NoCharge

WCAG ratios, on-device

Contrast checker

Compute the WCAG contrast ratio between two hex colours, and compare the common NoCharge board and text pairs. Runs in this browser; nothing is uploaded.

Category: Accessibility

Bottom line: Enter two hex colours and see their WCAG 2.x contrast ratio, plus the AA/AAA thresholds for normal and large text. The tool also lists NoCharge's common palette pairs with the exact ratio each achieves. It is a calculation, not a readability guarantee for every person.

Two colours

Check any pair

Quiet Arcade pairs

Common NoCharge combinations

Aa
Body text on page background

#E0E0E0 on #121212

…
Aa
Accent text on page background

#12B66A on #121212

…
Aa
Text on panel

#E0E0E0 on #1C1C1C

…
Aa
Muted text on panel

#9A9A9A on #1C1C1C

…
Aa
Primary button text on accent

#0B1510 on #12B66A

…
Aa
Minesweeper accent on board

#38BDF8 on #18201E

…
Aa
Lights Out lit state

#A78BFA on #18211E

…
Aa
White stones on board

#E8F0EC on #18211E

…
Aa
Hangman accent on board

#FBBF24 on #18211E

…

How it works

The checker converts the two six-digit sRGB colors to linear-light channel values and combines them into relative luminance: L = 0.2126R + 0.7152G + 0.0722B. Contrast is (lighter L + 0.05) ÷ (darker L + 0.05). Threshold decisions use the unrounded ratio; the display rounds it to two decimal places.

Worked example

White has luminance 1 and black has luminance 0, so their ratio is (1 + 0.05) ÷ (0 + 0.05) = 21:1. Identical colors have a ratio of 1:1. Changing which one is foreground does not change this arithmetic.

For WCAG 2.x text contrast, AA uses 4.5:1 for normal text and 3:1 for large text; AAA uses 7:1 and 4.5:1 respectively. Large text means at least 18 pt regular or 14 pt bold, approximately 24 px or 18.7 px, not simply any heading element.

What it cannot do

  • The calculation assumes opaque sRGB foreground and background colors. It does not model gradients, images, transparency, blending, or anti-aliased edge pixels.
  • Text size and weight are not measured. The normal/large labels show thresholds, not a verdict about an actual element on another page.
  • The checker does not implement APCA, assess color-only communication, or certify a complete page's WCAG conformance.
  • A high ratio does not guarantee comfortable reading for every person. Inputs and results remain in page memory.

FAQ

What ratio should I aim for?

WCAG 2.x AA: 4.5:1 for normal text, 3:1 for large text and UI components. AAA is 7:1 for normal text and 4.5:1 for large text. NoCharge targets AA and publishes the results in its accessibility position.

Why does my checker result differ from an online tool?

WCAG 2.x ratio checkers use sRGB relative luminance. Results can differ if a tool models opacity or blending, rounds before testing thresholds, or uses a different contrast model such as APCA. This checker computes exact WCAG ratios from hex colours without blending.

Does a ratio guarantee text is readable?

No. Contrast is necessary but not sufficient: font size, weight, background texture, and visual processing all matter. The checker states a ratio, not a readability verdict for every person.

What about NoCharge palette pairs?

The palette section names common Quiet Arcade foreground/background pairs and calculates each ratio. Those examples are not a live inspection of every state, overlay, or control in the games.

Embed this tool

<iframe src="https://nocharge.net/tools/contrast-checker/" width="400" height="620" title="NoCharge contrast checker"></iframe>
<p>Source: <a href="https://nocharge.net/tools/contrast-checker/">NoCharge tool</a></p>

Next action

Try it with a game