Question 1

What is an accessibility checker?

Accepted Answer

An accessibility checker is a tool that evaluates whether a design — typically a color combination — meets recognized accessibility standards. The dominant standards are WCAG 2.0/2.1 (W3C Web Content Accessibility Guidelines) and ADA Section 508 (US federal procurement standard). A checker typically returns a pass/fail verdict and a numeric contrast ratio so designers and developers can verify their work before publishing. The most common check is color contrast between text and background, but accessibility also covers keyboard navigation, screen reader semantics, and motion sensitivity.

Question 2

What is the WCAG color contrast ratio?

Accepted Answer

The WCAG color contrast ratio is a numeric value from 1:1 (no contrast, e.g. white on white) to 21:1 (maximum, black on white) that describes the perceptual difference between two colors. The W3C defines the formula using relative luminance. WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG 2.1 AAA raises this to 7:1 for normal text and 4.5:1 for large text. WCAG 3.0 (draft) introduces APCA (Accessible Perceptual Contrast Algorithm), which uses a different formula tuned to modern displays and small text.

Question 3

What is the difference between WCAG AA, WCAG AAA, and ADA?

Accepted Answer

WCAG 2.1 AA is the industry baseline — most US/EU accessibility lawsuits cite AA-level failures. WCAG 2.1 AAA is a stricter tier (7:1 normal text) used by government, healthcare, and education sites. ADA Section 508 is a US federal procurement standard that references WCAG 2.0 AA — it applies to US federal agencies and is often adopted by US state governments and companies selling to the federal government. In short: AA is the legal floor, AAA is best-in-class, ADA is the federal rule. A practical rule: target AA everywhere, AAA for above-the-fold and high-stakes content.

Question 4

What is APCA and how is it different from WCAG 2.1?

Accepted Answer

APCA (Accessible Perceptual Contrast Algorithm) is the contrast method proposed for WCAG 3.0. It is a perceptual model — it weights the contrast contribution of each color asymmetrically, which better matches how humans perceive lightness differences on modern displays. APCA returns a value from 0 (no contrast) to 108 (max contrast) and the pass thresholds depend on body text size and weight. The key practical difference: APCA is more accurate for small text on light/dark mode UIs, and it gives different verdicts for dark-on-light vs light-on-dark combinations. It is not yet a final W3C recommendation, but it is widely used in modern design systems.

Question 5

What colors are accessible for body text?

Accepted Answer

Safe accessible pairings for body text on white (#ffffff) include dark gray (#0f172a, ratio ~17:1), medium gray (#475569, ratio ~7.5:1), and dark blue (#1e3a8a, ratio ~12:1). Avoid light gray (#94a3b8, ratio ~3:1) and pale yellow on white (~1.1:1). For dark mode (background #0f172a or #111827), aim for foreground colors above #cbd5e1 in lightness — pure white (#ffffff) is fine and gives a high contrast ratio. Tools like this accessibility checker verify any specific combination against AA/AAA/ADA in 1 second.

Question 6

Does the tool check for color blindness?

Accepted Answer

Yes — the Accessibility Checker includes a color blindness (CVD) simulator. It applies the Brettel-Viénot-Mollon transformation matrices for the three most common types: protanopia (red-blind, ~1% of men), deuteranopia (green-blind, ~6% of men), and tritanopia (blue-blind, rare). You can preview your color combination as it would appear to a user with each type of color vision deficiency. This helps designers avoid red/green-only signaling, which is invisible to ~8% of male users. Note: CVD simulation is a complement to contrast checking, not a substitute — the contrast ratio is the primary accessibility metric.

Question 7

Is my color data sent to a server?

Accepted Answer

No. The Accessibility Checker runs entirely in your browser. The color values you enter are processed by client-side JavaScript, and the contrast ratios are computed locally. Nothing is transmitted to a server, nothing is logged, nothing is stored. You can use the tool offline once the page is cached. The CVD simulation matrices are hardcoded into the script. This is the privacy guarantee of all Toolzie tools — what you compute on your screen stays on your screen.

♿ Accessibility Checker

Pick your colors

Live preview

Standards check

Color blindness (CVD) simulator

Share & save

📚 Accessibility quick reference

❓ Frequently asked questions

Related tools