About ContrastKit

ContrastKit checks whether a foreground and background color combination meets the contrast requirements from the Web Content Accessibility Guidelines (WCAG), so text stays readable for people with low vision or color vision deficiencies.

What is WCAG?

WCAG is a set of accessibility standards published by the W3C. One of its requirements is a minimum contrast ratio between text and its background, so content remains legible for as many people as possible, including users with low vision or color blindness.

Normal text vs. large text

WCAG defines two size categories with different thresholds. Large text — 18pt (24px) or larger, or 14pt (~19px) and bold — is easier to read at lower contrast, so it has a lower minimum ratio than normal text.

AA and AAA levels

AA is the standard, commonly required conformance level. AAA is a stricter, enhanced level. Minimum ratios:

• AA — 4.5:1 normal text, 3:1 large text
• AAA — 7:1 normal text, 4.5:1 large text

Graphical objects and UI components

WCAG also sets a minimum contrast for non-text elements that convey meaning — icons, and the borders of UI components like input fields, checkboxes, and buttons — so their boundaries stay visible against the background. This is a single requirement of 3:1, with no separate AAA level.

How the ratio is calculated

Each color is converted to a relative luminance — a measure of how bright it appears, on a scale from 0 (black) to 1 (white). The contrast ratio compares the luminance of the lighter color to the darker one:

ratio = (L1 + 0.05) / (L2 + 0.05)

where L1 is the luminance of the lighter color and L2 the darker one. The result ranges from 1:1 (no contrast) to 21:1 (black on white).

black (L=0) vs. white (L=1) → (1 + 0.05) / (0 + 0.05) = 21.00:1

WCAG 2.x vs. APCA

APCA (Accessible Perceptual Contrast Algorithm) is a newer contrast model built from perceptual research, designed to replace the WCAG 2.x ratio in a future version of the guidelines (WCAG 3). It's not yet a finalized W3C standard, so ContrastKit shows both side by side.

The WCAG 2.x formula treats a light-on-dark pair and a dark-on-light pair with the same luminance values as equally contrasting — but perceptually they aren't. APCA accounts for this by producing a signed score called Lc (Lightness Contrast), roughly from -108 to 106: positive for dark text on a light background, negative for light text on a dark background. It also weighs text and background luminance differently rather than using a single ratio.

Same WCAG ratio both ways — but APCA treats them differently, and the magnitude isn't even identical.

Reading an Lc score

APCA's official guidance maps minimum Lc values to specific font sizes and weights in a detailed table. ContrastKit simplifies that into three tiers, based on the absolute Lc value:

• Preferred — Lc 90+, comfortable for any body text
• Body Text — Lc 75+, minimum for normal-sized text
• Large Text — Lc 60+, minimum for large or bold text only

These tiers are a practical simplification, not an official conformance scale — APCA does not define AA/AAA-style levels.

Precise minimum by font size & weight

The 3-tier guidance above is a shortcut. For an exact answer, the Contrast Checker also has a font size and weight selector that looks up the real minimum Lc from APCA's official "Bridge" font table — the same lookup data used by the apca-w3 reference implementation. Heavier and larger text can be read comfortably at a lower Lc than small, thin text.

Color suggestions

When a pair fails AA for normal text (4.5:1), ContrastKit can suggest a nearby color that passes — for the foreground, the background, or both. It works by shifting only the lightness of one color, keeping its hue and saturation intact, until the contrast ratio crosses 4.5:1. It's a starting point, not a design decision — always sanity-check the result against your brand and the rest of the page.

Importing a palette

The Palette page accepts more than a plain color list. Pasting a CSS custom properties block, a Tailwind config snippet, or a Figma/W3C design tokens JSON export all work — ContrastKit detects the format and pulls out every named color it can find, using the surrounding key as the token name when one is present.

Tonal scales

The Scale page turns one color into a Tailwind-style 50–950 ramp. Steps are spaced in OKLCH, a perceptually uniform color space, so each step looks about as far from its neighbours as the next one does — something HSL lightness can't promise. The hue is held constant, chroma peaks around the middle and fades toward both ends, and your base color is reproduced exactly on the step whose lightness it is closest to. Every step is then checked as text against white and black, which is usually the first question a scale has to answer.

Your own mockups

The Mockups page can take an SVG of yours. It lists every color the drawing uses and lets you say which one plays which role — background, surface, heading, body or accent — while everything else stays exactly as drawn. Before the file is shown, it is cleaned with an allowlist: scripts, embedded HTML, event handlers and any reference to an outside URL are removed, and only links to ids inside the same drawing survive. The file never leaves your browser, and imported mockups are kept only for the current tab.

Color vision simulation

The Contrast Checker, the Palette matrix and the Mockups can all be viewed through an approximation of protanopia, deuteranopia or tritanopia. Contrast conformance always refers to the real colors — the simulation is there for a different question: do two colors that pass contrast still look different from each other? In the matrix, pairs that collapse to nearly the same color under a simulation are marked with ≈, since relying on those two to tell things apart would exclude the very people the simulation stands in for.

Installing ContrastKit

ContrastKit is an installable app (PWA). Most browsers offer an "Install" option in the address bar; once installed, the app shell keeps working offline — the color math runs entirely in your browser, no server involved.

Export badge

The Contrast Checker can generate a small badge (SVG or PNG) summarizing the current pair's result — handy for pasting into a pull request, a design system doc, or a README.