Skip to content

🌈 Generate a table for determining color contrast for color pairs

License

Notifications You must be signed in to change notification settings

alexchantastic/contrast-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌈 contrast-table

Generate a table to help you determine if your color palette is accessible as per WCAG 2.1.

Screenshot

How to use

  1. Navigate to https://alexchantastic.github.io/contrast-table/

  2. When you first load the app, an example color palette will be loaded for you

  3. To change the color palette used, append your comma separated color palette to the URL starting with a ?

    e.g., https://alexchantastic.github.io/contrast-table/?#000,#fff

  4. Each cell represents the combination of the column header (foreground color) and the row header (background color) and displays:

    • 🔡 ✅ body text passes
    • 🔡 ❌ body text fails
    • 🔠 ✅ large-scale text passes
    • 🔠 ❌ large-scale text fails
    • Contrast ratio
    • Score (AA / AAA / F)

Accepted color values

Value type Example
Hex #b4d455
Named rebeccapurple
rgb rgb(255, 255, 255)
rgba rgba(255, 255, 255, 0.5)

License

Code released under the MIT License.