Loading post…
HerokuAriana EscobarProblem & solution
Designing for Accessibility: Contrast Ratio
Summary
Heroku’s accessibility initiative targeted WCAG 2.0 Level AA luminance contrast for its user interfaces, addressing reduced contrast sensitivity and color-vision deficiencies. The team audited its palette with Contrast Grid, proposed darker and revised colors, then chose a narrower proposal that preserved existing names and colors while meeting accessibility concerns within an affordable implementation effort. Because the palette affected GUIs built with Purple 3 and Malibu, pull requests generated Review Apps so teams could audit production-ready CSS and SVG assets across Dashboard components before release. Audits using axe-core 3.2.2 covered common and unusual elements, reducing color-contrast violations by an order of magnitude before rollout. The updated palette now spans the Heroku Dashboard, with planned accessibility testing through Ember tooling and further audits across other interfaces.
Context
Heroku sought to make its interfaces meet WCAG 2.0 Level AA luminance contrast requirements. The work addressed reduced contrast sensitivity associated with color-vision deficiencies, age-related low vision, presbyopia, and varying lighting conditions, while recognizing that color should not be the sole way to convey information.
Approach / What changed
The team audited existing text and background combinations with Contrast Grid, revised the grayscale palette, and selected a scoped proposal that preserved existing colors and names while addressing contrast concerns. They used Review Apps to inspect updated Purple 3 and Malibu assets in Dashboard interfaces, audited pages with axe-core 3.2.2, rolled out the changes, and planned automated accessibility checks with Ember tooling.
Takeaways
WCAG 2.0 requires a luminance contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large-sized text.
Review Apps let teams audit production-ready CSS and SVG assets in realistic Dashboard interfaces before releasing the new palette.
Audits found that color-contrast violations across the GUIs dropped by an order of magnitude after the palette changes.
Source and freshness
- Source
- heroku.com
- Published
- Added to Yomu
Summaries are generated from the original by a language model. Check the original before relying on it.
Keep reading
Related reading
The Good Stuff
Paid picks we use ourselves. Links carry a referral code — a subscription through one earns us a commission at no extra cost to you.
The best engineering reads, once a week
One useful email. Unsubscribe anytime.