Fix accessibility issue #9165 on color contrast ratio (#1270)

maitxn · web-flow · commit 2ddfdac2d2a3 · 2024-09-12T09:11:26.000-07:00
## 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)
diff --git a/src/theme.js b/src/theme.js
@@ -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: {
