review existing palettes for color contrast

[ntno]

check existing palettes to see which conform to WCAG contrast guidelines

• https://webaim.org/resources/contrastchecker/
• https://accessibleweb.com/color-contrast-checker/

tasks:

• report results
• make a decision on remediation (what will be changed if anything; document reasoning behind decision)
• create issues to track remediation work if necessary

[cowellbunga]

Summary

I wrote a script that reviews the existing palettes to determine alignment with WCAG guidelines, based on identified foreground and background colors.

In general, most palette foreground colors that contain fg, foreground, or primary pass the WCAG tests with the default palette backgrounds. There are some exceptions. Other color types vary in terms of WCAG alignment.

Steps

1. Identify the background and foreground colors based on simple keywords (ex: property name contains "background")
2. Check each background-foreground combo for WCAG alignment
3. Report results in an html table

Notes

• keywords: bg, background, fg, foreground, color, matplotlib color names
• Currently assumes all non-background colors are foreground colors for the test
• No immediate remediation suggestions

Legend

• ✅: all WCAG tests passed
• ☑️: some WCAG tests passed
• ❌: no WCAG tests passed
• Symbols link to WCAG api response with tests

dark.css

backgrounds	primary-color (62c4ff)	secondary-color (a3abba)	tertiary-color (a3abba)	font-color (e8e9ed)	error-color (ff3c74)
background-color (222225)	✅	☑️	☑️	✅	☑️
progress-bar-background (3f3f44)	☑️	☑️	☑️	✅	☑️
code-bg-color (3f3f44)	☑️	☑️	☑️	✅	☑️

gruvbox_dark.css

< < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < <

backgrounds	gb-dm-dark-blue (458588)	gb-dm-dark-aqua (689d6a)	gb-dm-light-blue (83a598)	gb-dm-light-aqua (8ec07c)	gb-dm-dark-gray (928374)	gb-dm-dark-green (98971a)	gb-dm-fg4 (a89984)	gb-dm-light-gray (a89984)	gb-dm-dark-purple (b16286)	gb-dm-light-green (b8bb26)	gb-dm-fg3 (bdae93)	gb-dm-dark-red (cc241d)	gb-dm-light-purple (d3869b)	gb-dm-fg2 (d5c4a1)	gb-dm-dark-orange (d65d0e)	gb-dm-dark-yellow (d79921)	gb-dm-fg1 (ebdbb2)	gb-dm-light-orange (f38019)	gb-dm-light-yellow (fabd2f)	gb-dm-light-red (fb4934)	gb-dm-fg0 (fbf1c7)
gb-dm-bg0-hard (1d2021)	☑️	☑️	☑️	✅	☑️	☑️	☑️	☑️	☑️	✅	✅	❌	☑️	✅	☑️	☑️	✅	☑️	✅	☑️	✅
gb-dm-bg0 (282828)	☑️	☑️	☑️	✅	☑️	☑️	☑️	☑️	☑️	✅	☑️	❌	☑️	✅	☑️	☑️	✅	☑️	✅	☑️	✅
gb-dm-bg0-soft (32302f)	☑️	☑️	☑️	☑️	☑️	☑️	☑️	☑️	☑️	☑️	☑️	❌	☑️	✅	☑️	☑️	✅	☑️	✅	☑️	✅
gb-dm-bg1 (3c3836)	❌	☑️	☑️	☑️	☑️	☑️	☑️	☑️	❌	☑️	☑️	❌	☑️	☑️	❌	☑️	✅	☑️	☑️	☑️	✅
gb-dm-bg2 (504945)	❌	❌	☑️	☑️	❌	❌	☑️	☑️	❌	☑️	☑️	❌	☑️	☑️	❌	☑️	☑️	☑️	☑️	❌	✅
gb-dm-bg3 (665c54)	❌	❌	❌	☑️	❌	❌	❌	❌	❌	☑️	❌	❌	❌	☑️	❌	❌	☑️	❌	☑️	❌	☑️
gb-dm-bg4 (7c6f64)	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	☑️	❌	❌	❌	☑️

pink.css

<

backgrounds	font-color (190910)	secondary-color (715864)	tertiary-color (715864)	error-color (bb0047)	primary-color (f90d7a)
progress-bar-background (d4d4d4)	✅	☑️	☑️	☑️	❌
code-bg-color (f7f7f7)	✅	☑️	☑️	☑️	☑️
background-color (ffffff)	✅	☑️	☑️	☑️	☑️

sans.css

• Style does not have enough foregrounds and backgrounds to compare.

sans_dark.css

backgrounds	primary-color (62c4ff)	secondary-color (a3abba)	tertiary-color (a3abba)	font-color (e8e9ed)	error-color (ff3c74)
background-color (222225)	✅	☑️	☑️	✅	☑️
progress-bar-background (3f3f44)	☑️	☑️	☑️	✅	☑️
code-bg-color (3f3f44)	☑️	☑️	☑️	✅	☑️

[ntno]

this is awesome! thank you @cowellbunga !
can you open a PR to ntno/mkdocs-terminal for this and i can take a look in more detail?

[ntno]

PR would also let me add comments/questions inline