Craft · Interactive
Accessibility basics, checked with real numbers
Six checks worth running on anything you ship — cited to WCAG 2.2 and the Web Accessibility Initiative — plus a contrast-ratio calculator that uses the actual relative-luminance formula from the specification, not a rule of thumb.
What you’re browsing for vs. what you need to know: you probably want to know if your colors “pass.” What you actually need is the habit of checking — contrast is one of six checks here, and the other five (keyboard, semantics, alt text, focus, motion) don’t show up in a screenshot at all.
The calculator
Check a real contrast ratio
Enter two colors as hex codes. Nothing is sent anywhere — it computes in your browser using WCAG's own formula.
Your colors
Result
| AA · normal text | ≥ 4.5:1 |
| AA · large text | ≥ 3:1 |
| AAA · normal text | ≥ 7:1 |
| AAA · large text | ≥ 4.5:1 |
| Non-text / UI components (SC 1.4.11) | ≥ 3:1 |
“Large text” means at least 18 point or 14 point bold — roughly 24px regular or 18.7px bold at typical browser DPI, per WCAG's own definition. Ratios are compared unrounded, so 4.49:1 does not meet a 4.5:1 threshold.
The six checks
What to check beyond color
Contrast is the one with a calculator. The other five need a keyboard, a screen reader, or your OS settings to check properly.
| Check | What it means | How to check it | WCAG reference |
|---|---|---|---|
| Semantic HTML | Real <button>, <nav>, ordered headings and <label>s tied to inputs, instead of generic <div>/<span> reimplementations. |
Tab through the page — does a screen reader announce a role and a name for everything interactive? | SC 4.1.2 Name, Role, Value |
| Keyboard navigation | Every interactive control reachable and operable with Tab, Shift+Tab, Enter, Space and arrow keys alone. | Unplug the mouse. Can you reach and activate everything, in a sensible order? | SC 2.1.1 Keyboard |
| Contrast | Text and meaningful graphics meet a minimum contrast ratio against their background. | Use the calculator above with your real foreground/background pair. | SC 1.4.3 & 1.4.6 |
| Alt text | Meaningful images carry a real description in alt; purely decorative images get alt="" (empty, not missing). |
Turn images off, or use a screen reader — does anything important go silent? | SC 1.1.1 Non-text Content |
| Focus states | A visible focus indicator exists, and it isn't hidden behind a sticky header or overlay when it lands. | Tab through the whole page and watch whether you can always see where focus is. | SC 2.4.7 & 2.4.11 (new in 2.2) |
| Reduced motion | The OS-level “reduce motion” preference is respected; information doesn't depend only on an animation. | Enable “reduce motion” in your OS settings and reload — does non-essential motion actually stop? | prefers-reduced-motion (MDN) |
Accessibility is one line item on a longer list of what generated code typically still needs before real users see it.
Sources
- W3C WAI, “Web Content Accessibility Guidelines (WCAG) 2.2.” w3.org/TR/WCAG22/. Accessed 27 Jul 2026.
- W3C WAI, “Understanding SC 1.4.3: Contrast (Minimum)” — source of the relative-luminance and contrast-ratio formulas used by the calculator above. w3.org/WAI/WCAG22/Understanding/contrast-minimum.html. Accessed 27 Jul 2026.
- W3C WAI, “Understanding SC 1.4.11: Non-text Contrast.” w3.org/WAI/WCAG22/Understanding/non-text-contrast.html. Accessed 27 Jul 2026.
- W3C WAI, “Understanding SC 2.4.7: Focus Visible.” w3.org/WAI/WCAG22/Understanding/focus-visible.html. Accessed 27 Jul 2026.
- W3C WAI, “What's New in WCAG 2.2” — source for SC 2.4.11 Focus Not Obscured, new in this version. w3.org/WAI/standards-guidelines/wcag/new-in-22/. Accessed 27 Jul 2026.
- W3C WAI, “Introduction to Web Accessibility.” w3.org/WAI/fundamentals/accessibility-intro/. Accessed 27 Jul 2026.
- MDN Web Docs, “prefers-reduced-motion.” developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion. Accessed 27 Jul 2026.
FAQ