Skip to content

Commit

Permalink
Fix accessibility issue #9165 on color contrast ratio (npm#1270)
Browse files Browse the repository at this point in the history
## References

- github/accessibility-audits#9165

## What

This pull request includes change to the `src/theme.js` file to fix an
accessibility issue related to color contrast ratio between `npm link`
text #cb0000 and `surrounding text` #1f2328

## Why

If the link has no distinct style (such as underline) and luminosity
contrast of the link has insufficient contrast ratio with the
surrounding text. As a result, users with low vision who experience low
contrast cannot detect visually that the text is intended to function as
a link.

## Accessibility improvements:

-
[`src/theme.js`](https://github.com/npm/documentation/pull/1270/files#diff-09ce39aad75bba2010ea6e7fb785187ec76b341be11d5f7f2cc6b83839a1b728):
Changed the `npm theme` color from `#cb0000` to `#cb3837 ` to meet the
minimum contrast 3:1


![image](https://github.com/user-attachments/assets/ba2ed776-e069-4776-ae62-ab78a7369f8a)
  • Loading branch information
maitxn committed Sep 12, 2024
1 parent 89e44a5 commit 2ddfdac
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import {ThemeProvider as Provider, theme, Box} from '@primer/react'
import deepmerge from 'deepmerge'

export const NPM_RED = '#cb0000'
export const NPM_RED = '#cb3837'

export const npmTheme = deepmerge(theme, {
colors: {
Expand Down

0 comments on commit 2ddfdac

Please sign in to comment.