Accessibility
Accessibility Statement
Font Blend targets WCAG 2.2 AA. The contrast checker uses the W3C contrast formula. Every interactive control is reachable with a keyboard, and color is never the only signal for pass or fail. This page lists what is covered, what is not, and how to report a problem.
Keyboard Navigation
Every interactive control is reachable via Tab and operable with Enter or Space. Focus rings are visible. No keyboard traps.
Contrast and Color
The contrast checker uses the W3C contrast formula. Pass and fail outcomes are stated in text, not communicated by color alone.
Screen Reader Support
Semantic HTML throughout. ARIA labels on icon-only buttons. Live regions announce dynamic changes from toast notifications.
Reduced Motion
Respects prefers-reduced-motion via CSS. Animations are removed or shortened when the user asks for less motion.
Touch Targets
Interactive controls target a minimum 44 by 44 pixel hit area on mobile where practical.
Our Commitment
Font Blend targets WCAG 2.2 Level AA, the current accessibility standard published by the W3C Web Accessibility Initiative. The standard defines how web content should be perceivable, operable, understandable, and robust. We apply it across every page, including the typography playground, contrast checker, and brand kit builder.
The four principles behind the standard map directly to the sections below. Each tool page is reviewed against them, and the checks are re-run whenever a component changes.
This statement is updated when the site changes materially. It does not change to imply freshness.
Conformance Status
This statement covers the Font Blend website as a whole, including every tool, catalog page, and article. We target WCAG 2.2 Level AA and treat AAA as a stretch goal for long-form reading content. The exceptions that remain are listed under Known limitations below rather than hidden, and each one is either documented or scheduled for a fix.
Nothing on this page is a claim of certification. Accessibility conformance is not a one-time audit; it is a running review that has to survive new pages, new components, and new content. This statement was last reviewed in September 2026.
Keyboard Navigation
Every interactive control is reachable with the Tab key and operable with Enter or Space. The site has a skip link at the top of every page that jumps straight to the main content. Focus rings are visible against every background in both light and dark themes. There are no keyboard traps: a user can always Tab out of any component, including dialogs and dropdowns, with Escape or by Tab.
Focus order follows the visual order of the page, and dialogs and dropdowns close with Escape and hand focus back to the control that opened them. The playground sliders respond to arrow keys as well as drag, so adjusting a type scale or a color value never requires a mouse.
Contrast and Color
The contrast checker uses the W3C contrast formula defined in WCAG 2.2 Success Criterion 1.4.3. A combination is reported as AA or AAA pass for normal or large text, with the numeric ratio printed next to the badge. Pass and fail outcomes are stated in text. Color is never the only signal.
The site palette has been checked at the component level. Body text uses a near-black on a warm-neutral background in light mode, and a near-white on a deep ink background in dark mode. Both pairings clear AA for normal text.
The light-mode body pairing is the ink on cream combination used across the design system, measured at 15.49:1 with the W3C formula. That clears AAA for normal text, not just AA. The dark theme sets its background to a deep ink defined in the stylesheet as oklch(0.16 0.006 80), and the near-white text against it clears AA with a wide margin.
Every palette published in the color palette generator is verified against the same formula before it ships, and the contrast checker page explains the math if you want to verify any combination yourself. For the reasoning behind the numbers, the WCAG 2.2 contrast requirements article covers what changed in the new version and what each threshold means in practice.
Screen Reader Support
Pages use semantic HTML throughout: header, main, nav, section, article, and footer landmarks are present on every page. Icon-only buttons carry aria-label. Toast notifications announce via a live region. Color swatches expose their hex value as accessible names.
Reduced Motion
Font Blend respects prefers-reduced-motion. When the user has reduced motion enabled at the OS level, transitions are shortened or removed via CSS media queries. No motion is required to operate any feature.
How We Test
Accessibility is checked at release time, not as an afterthought. Every new page or component goes through the same pass: an automated scan for missing labels, heading order, and broken landmarks; a keyboard-only walk of every interactive control; a screen reader pass on the main flows; and a contrast check of every new color combination using the W3C formula. Nothing ships with a known AA failure in the contrast checker.
Automated scans catch a fraction of real issues, which is why the manual passes exist. The keyboard walk is done in both Chromium and Firefox, and the screen reader pass uses a mainstream desktop setup rather than a simulated environment. When a gap is found after shipping, it is logged under Known limitations and fixed in the next release rather than quietly dropped.
Contrast gets the most attention because it is the easiest to get wrong. Every new palette, pairing preview, and tool surface is measured with the W3C formula before release, and the same check runs against the dark theme, because dark mode is not an inversion of light mode and has to be measured on its own terms. The contrast checker page documents the exact math for anyone who wants to reproduce a measurement.
Touch Targets
Interactive controls target a minimum 44 by 44 pixel hit area on mobile where practical. Some compact controls in dense tool surfaces (the variable font slider track, for instance) are smaller, but each has an accessible name and a larger clickable label next to it.
Known Limitations
- Third-party font previews render text in the requested family. The font name itself is in the surrounding markup, but a screen reader reading just the preview paragraph will not announce the font family by default. The preview always sits next to a labeled card with the font name.
- The font inspector uses browser APIs (the FontFaceSet and the Local Font API) that vary by browser. In browsers without the Local Font API, the inspector falls back to text input, which is operable but less complete.
- Some ad units, when ads are enabled, may ship their own accessibility issues outside our control. We mark ad slots with a visible label.
Standards Referenced
The contrast thresholds on this site come from the W3C WCAG 2.2 specification, in particular Success Criterion 1.4.3 (Contrast Minimum) and Success Criterion 1.4.11 (Non-text Contrast). The Understanding WCAG 2.2 documents published by the W3C Web Accessibility Initiative are the reference we use when a criterion needs interpretation.
WCAG 2.2 also sits behind EN 301 549, the harmonised European standard that the European Accessibility Act points to. We follow the W3C documents directly because they are the source the other standards draw from.
Reporting Issues
If you find an accessibility problem, please tell us. Email [email protected] with the page URL, the assistive technology you are using, and a short description of what happened. We respond to every report and prioritize concrete fixes.
Include the browser and operating system, with versions if you know them. A screenshot helps when the issue is visual; a short description of the step that failed helps when it is interactive. Issues that cannot be fixed immediately are recorded under Known limitations so nobody else hits them unannounced.
Common Questions
Why AA and Not AAA?
AA is the level that laws and procurement standards actually reference, and it is the bar we can defend across every page and tool. AAA is stricter, and holding 7:1 for normal text everywhere would rule out many brand colors and design choices. We treat AAA as a stretch goal for long-form reading content and say so when we reach it.
Does the Site Work Without Javascript?
Every page is prerendered as static HTML, so articles, catalog pages, and this statement read fine without scripting. The interactive tools need JavaScript to compute and render their results, and their markup still ships with sensible default values.
How Often Is This Statement Reviewed?
The statement is re-read whenever a new tool, a new component, or a change to the design system ships. The last review is dated on this page so you can judge how current it is.
Do the Tools Require an Account?
No. Nothing on the site asks for an account, and saved favorites live in your browser's local storage rather than on a server. The privacy statement describes exactly what is stored and where.
Looking for the technical contrast tool? Open the WCAG contrast checker. For the reasoning behind the thresholds, read the WCAG 2.2 contrast requirements article. For how the site handles your data, read the privacy statement.