---
title: "Designing for Accessibility: Contrast Ratio"
description: "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."
---

# Designing for Accessibility: Contrast Ratio

[Heroku](https://yomu.fyi/company/heroku) · Ariana Escobar · Aug 21, 2019

**Type:** Problem & solution

## 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.

**Tags:** [Accessibility](https://yomu.fyi/topic/accessibility), [CSS](https://yomu.fyi/topic/css), [Testing](https://yomu.fyi/topic/testing)

- Source: [Heroku](https://www.heroku.com/blog/designing-for-accessibility-contrast-ratio)
- Source URL: https://www.heroku.com/blog/designing-for-accessibility-contrast-ratio
- Ingested by Yomu: 2026-09-09T14:27:44.363Z

[Read original post](https://www.heroku.com/blog/designing-for-accessibility-contrast-ratio)