Accessibility Tools
Test and improve web accessibility. Ensure your designs meet WCAG guidelines and work for all users.
Accessible software is better software. These tools check color contrast against WCAG thresholds, simulate color blindness, and generate accessible palettes so your interfaces pass where it counts.
3 tools availableThe numbers behind a contrast pass
Contrast in WCAG is a computed ratio between the relative luminance of text and its background, and WCAG 2.2 fixes the thresholds. Success Criterion 1.4.3 Contrast (Minimum), level AA, requires text to have a "contrast ratio of at least 4.5:1, except for the following: Large Text - Large-scale text and images of large-scale text have a contrast ratio of at least 3:1". Level AAA raises both numbers in 1.4.6 Contrast (Enhanced), and 1.4.11 Non-text Contrast covers the parts of an interface that are not text at all.
| Criterion | Level | Threshold | What it covers |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 for text; 3:1 for large-scale text | text and images of text |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 for text; 4.5:1 for large-scale text | the same content, held to a stricter ratio |
| 1.4.11 Non-text Contrast | AA | 3:1 against adjacent colours | UI components, their states, and the graphical objects needed to identify them |
Large scale depends on size and weight
The Understanding document frames the boundary as "text is less than 18 point if not bold and less than 14 point if bold" for the 4.5:1 case. In CSS pixels that is roughly 24px for regular text and 18.66px for bold: below those sizes AA wants 4.5:1, and at or above them 3:1 is enough. That is why a heading can pass in the same colour that fails in a 14px table cell.
The practical trap is that contrast is measured against the adjacent colour, and 1.4.11 names states explicitly. A button that passes against the page background can fail against its own hover or focus background, and a checkbox tick that disappears on a selected row is a non-text contrast failure even though no text is involved. Check every state, not just the default. The WCAG Contrast Checker computes the ratio, the Color Blindness Simulator shows what colour-only signalling costs, and the Accessible Color Palette generator gives you a set that passes before the screen is built.
Focus has to be visible, and the indicator has a size floor
Success Criterion 2.4.13 Focus Appearance (AAA) puts numbers on something usually left to taste: the indicator must be "at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states". A one-pixel dotted outline fails that area test even when a browser draws it for free, and a ring tuned against the page background fails on a coloured button because the contrast is measured between the focused and unfocused pixels of the component itself.
Pointer targets have a minimum size, with a spacing escape hatch
Success Criterion 2.5.8 Target Size (Minimum), AA in WCAG 2.2, states the floor directly: "The size of the target for pointer inputs is at least 24 by 24 CSS pixels". The exception is geometric rather than generous - undersized targets pass only when a 24 CSS pixel diameter circle centred on each one "do not intersect another target". So a 16 pixel icon button is not automatically a defect; a row of three of them with no space is. Measure the box and the gap, and record both in the accessibility test case instead of a verdict.
Run the contrast ratios in the WCAG Contrast Checker, prove what colour-only signalling costs in the Color Blindness Simulator, start a passing set from the Accessible Color Palette, and keep the numbers next to the testing hub cases that assert them.
Sources: Understanding SC 1.4.3 Contrast (Minimum), Understanding SC 1.4.6 Contrast (Enhanced), Understanding SC 1.4.11 Non-text Contrast, Understanding SC 2.4.13 Focus Appearance, Understanding SC 2.5.8 Target Size (Minimum) (W3C, WCAG 2.2).