Note: when a visually impaired user cannot read text on your site due to insufficient contrast, it's not just poor UX — it's a direct threat of lawsuits. WCAG 2.1 AA has become the de facto standard (see Web Content Accessibility Guidelines): a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold). WCAG contrast is one of the most common problems we fix. Font size and accessibility are tightly linked: large text allows lower contrast. We have conducted over 50 accessibility audits (5+ years of experience) and know how to bring your contrast and fonts to compliance without rewriting all CSS. Time savings on manual checks can reach 70%, and you avoid significant legal risks. Audit pricing depends on project scope and is available upon request.
Problems with Contrast and Fonts
A typical mistake is using a single accent color for text on all backgrounds. Even designers from major brands sometimes allow a contrast of 2.8:1 for input field hints or 2.1:1 for disabled buttons. Gradients, semi-transparent overlays, and hover states are especially tricky — automated tests often miss them.
We combine automated (Pa11y, Axe) and manual methods for checking. Automation catches up to 80% of errors, but the remaining 20% require a human eye. Compare the key approaches:
| Method |
Coverage |
Time per page |
Misses |
| Auto (Pa11y with WCAG2AA) |
70–80% |
2–5 seconds |
Gradients, text on images, animations |
| Manual (Axe + visual inspection) |
95%+ |
10–15 minutes |
Rare states, complex backgrounds |
Most Effective Contrast Checking Tools
For a quick pair-of-colors measurement, the WebAIM Contrast Checker is a handy online tool that shows the ratio and AA/AAA level. For mass auditing, we use Pa11y with a custom config. We embed a check for every page into the CI pipeline — if any page fails, the build breaks.
npx wcag-contrast "#333333" "#ffffff" # 12.63:1 — excellent
Note: online contrast checking must account for states too. For that we use Axe Core with WCAG 2.1 AA configurations.
How We Achieve WCAG AA Compliance in 5 Days
The process consists of five steps:
- Audit — run Pa11y and Axe on all pages, visually inspect complex states.
- Design — create semantic CSS variables that guarantee contrast.
- Implementation — replace colors with variables, correct fonts and spacing.
- Testing — re-run automated tests and manually verify key screens.
- Deploy and train — integrate CI check, hand over documentation and configs.
This approach is 4 times faster than chaotic manual fixing of each element. For example, on an e-commerce project, an automated test missed a card with a contrast of 4.1:1 on a gray background — we darkened the text color and documented a new token. Result: contrast became 4.6:1, and the entire design system updated in one day.
Design System and CSS Variables
What to do when contrast fails in a design system?
Typical scenario: the token --color-text-muted gives a contrast of 4.2:1 instead of 4.5:1. The solution is either darken the color or increase the font size to large. We recommend the first: change the color in one place, not the size on every component.
Example fix:
:root {
--color-text-primary: #1a1a1a; /* 17.1:1 AAA */
--color-text-secondary: #595959; /* 7.0:1 AA */
--color-text-muted: #767676; /* 4.54:1 AA */
--color-accent: #005EA2; /* 5.9:1 AA */
}
Was #808080 (4.0:1) → became #767676 (4.54:1). A 10% brightness change solved the problem.
Automating Checks in CI
To prevent contrast from breaking on every commit, we integrate Pa11y into GitHub Actions.
// .pa11yrc.json
{
"standard": "WCAG2AA",
"runners": ["axe", "htmlcs"],
"ignore": ["color-contrast"]
}
The pipeline stops the build if any check fails — the defect never reaches production.
Results and Guarantees
Systematic WCAG implementation pays off in 3–6 months through savings on checks and absence of lawsuits. Compare approaches:
| Approach |
Implementation cost |
Fine risk |
Maintenance time |
| Chaotic fixes |
Low |
High |
High |
| Systematic audit + CI |
Medium |
Minimal |
Low |
Timeline: from 3 to 5 working days for an average-sized project. We specify exact timelines after reviewing your code.
What Our Work Includes
- Full audit of contrast for all UI states (normal, hover, focus, disabled) on 2–3 different backgrounds.
- Audit of font sizes and line heights on desktop and mobile.
- Creation or refinement of a design system (CSS variables, documentation).
- Integration of Pa11y into your project's CI.
- Team training: how to check contrast in Figma and DevTools.
-
Guarantee: if a new page fails AA after our tokens are applied, we fix it for free.
With over 100 projects completed and a 5-year track record, we bring proven expertise to your accessibility journey. Contact us to audit your project. Order a free check of 5 pages — see the quality of our work.
Website Accessibility: WCAG, Screen Readers, Keyboard Navigation
On a major bank's website, the "Submit Application" button was marked up as <div class="btn" onclick="...">. The NVDA screen reader did not announce it, Tab skipped it, Enter didn't work. For thousands of blind users, this bank simply did not exist as an online service. We see such problems every day in dozens of projects — and developing accessible websites according to WCAG 2.2 AA has become the only way to avoid discrimination and legal risks. Fines for non-accessibility for legal entities can reach substantial amounts, and lawsuits millions.
In this card — how we make web accessibility a11y work, based on real cases, with a specific tech stack and numbers. No generic phrases.
Why is Semantic Markup the Foundation of Web Accessibility (a11y)?
Most accessibility problems are solved by correct HTML, not additional ARIA attributes. <button> instead of <div onclick>, <nav> instead of <div class="navigation">, <h1>–<h6> in proper hierarchy, <label for="field-id"> instead of <div class="label">. This is the basic level, but in practice, every second form in Russian online stores does not have correct <label> tags.
ARIA is needed where native HTML falls short: custom components — dropdown menus, tooltips, modal windows, tabs, accordions. And here the complexity begins.
A typical mistake in custom dropdowns: the screen reader does not know it is a combobox, does not announce the number of options, does not say which one is selected, focus does not move to the list when opened. Proper implementation:
-
role="combobox" on the input
-
aria-expanded="true/false" when opened/closed
-
aria-controls="listbox-id" points to the list
-
aria-activedescendant — ID of the currently selected item
-
role="option" and aria-selected on each option
This is not theory; it is tested with a screen reader. NVDA + Chrome or VoiceOver + Safari is a mandatory part of QA.
Example implementation of custom combobox with ARIA
<div role="combobox" aria-expanded="false" aria-controls="listbox-1" aria-activedescendant="" tabindex="0">
<label for="input-1">Select city</label>
<input id="input-1" type="text" role="combobox" aria-autocomplete="list" />
<ul id="listbox-1" role="listbox" aria-label="Cities">
<li role="option" aria-selected="false" id="opt-1">Moscow</li>
<li role="option" aria-selected="false" id="opt-2">St. Petersburg</li>
</ul>
</div>
The cost of fixing a single Level A violation varies depending on complexity. Implementing a11y from the design stage reduces the refactoring budget by 2–3 times compared to retrofitting a finished site.
How to Properly Build Keyboard Navigation?
Tab order should match the visual order of elements. If in HTML the "Cancel" button comes before "Confirm", but CSS swaps them — the keyboard user is confused.
Focus trap in modal windows. When a modal opens, Tab should cycle only within it. When closing, return focus to the element that opened the modal. Without this, the user ends up at the top of the page after closing.
tabindex="-1" — element does not enter Tab sequence but can receive focus programmatically. Used for elements that receive focus via JavaScript (section headings after anchor navigation).
tabindex="1" and above is almost always an error. Explicit order breaks natural order and creates unpredictable behavior. Control order via DOM, not tabindex.
Skip links — a "Skip to content" link, hidden visually, visible on Tab. Allows screen reader users to skip repetitive navigation.
Color and Contrast: Requirements and Common Violations
WCAG 2.2 AA requires contrast 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold). AAA requires 7:1 and 4.5:1.
The most common violations: gray placeholder in inputs (#999 on white = 2.9:1), light gray secondary text, white text on pastel backgrounds.
Color should not be the sole indicator: "required fields are red" without an asterisk — violation for color blind users.
Testing tools: axe DevTools, WAVE, Accessibility Inspector in Chrome DevTools. axe-core integrates into Playwright tests: automatic check of 80+ rules on every deployment. Manual testing finds about 60% more errors than automated.
What Is Important About Media Content and Dynamics?
Images without alt — a common basic failure. alt should be meaningful: not alt="image_123.jpg", but a description of content relevant to context. Decorative images — alt="" (empty, not missing attribute).
Video should have captions. YouTube auto-captions are not a standard; they make mistakes. WebVTT files with correct captions for all educational and marketing video content.
Animations — a problem for users with vestibular disorders. @media (prefers-reduced-motion: reduce) — media query that disables or slows animations for users with that OS setting.
What Changed in WCAG 2.2?
Version 2.2 came into effect with new criteria:
| Criterion |
Level |
Essence |
| 2.5.7 Dragging Movements |
AA |
All drag operations must have a keyboard alternative |
| 2.5.8 Target Size |
AA |
Minimum interactive element size 24×24 px |
| 3.2.6 Consistent Help |
A |
Contact/chat location should be same on all pages |
| 3.3.7 Redundant Entry |
A |
Do not force re-entry of same information in one session |
These criteria raise the entry bar, but we already include them in our standard checklist.
| Level |
Minimum text contrast |
Large text contrast |
| AA |
4.5:1 |
3:1 |
| AAA |
7:1 |
4.5:1 |
Audit and Remediation
Automated tools find about 30–40% of violations. The rest is only manual testing. Minimum scenario: go through the entire critical user flow (registration, purchase, form) using only keyboard and screen reader.
Process
-
Automated audit — axe-core, Lighthouse, WAVE — outputs 80+ rules.
-
Manual testing — NVDA, VoiceOver, keyboard — 2–3 days for a typical site.
-
Violation prioritization — P1 (blocks usage), P2 (creates difficulties), P3 (enhancements).
-
Fixing — iteratively, integrate checks into CI via Playwright + axe.
-
Re-audit — close all P1/P2 before release.
-
Documentation and handover — report with results, maintenance recommendations, team training.
Results and Scope
- Full audit report with violation prioritization (PDF/HTML)
- Fixed code: semantic markup, ARIA, keyboard navigation
- Integration of axe-core into CI/CD for regression control
- Training for client developers on a11y (2-hour session)
- Access to repository with correct component examples
- Guarantee of WCAG 2.2 AA compliance at time of delivery
Timeline
| Stage |
Duration |
| Site audit (up to 50 pages) |
3–7 days |
| Remediation of A/AA violations on existing project |
3–8 weeks |
| Development of new project adhering to WCAG 2.2 AA |
from 6 weeks |
Budget is calculated individually after the audit. Contact us — we will evaluate your project in 1 day. Get a consultation and free checklist when ordering an audit.
Experience and Guarantees
We have been working in web accessibility a11y for over 8 years. Completed more than 50 projects for banks, retail, and government. Certified specialists (IAAP CPACC, WAS). We guarantee passing a third-party audit or will fix for free.
WCAG 2.2 Standard — official W3C recommendation defining web content accessibility requirements.
Wikipedia: Web Content Accessibility Guidelines
Wikipedia: ARIA
— web accessibility levels a11y per version 2.2.
Order an audit now — get a checklist and preliminary estimate for free. Contact us – we will respond within an hour.
