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.