AL
alexchantastic/contrast-table
:rainbow: Generate a table for determining color contrast for color pairs
🌈 contrast-table
Generate a table to help you determine if your color palette is accessible as per WCAG 2.1.
How to use
-
Navigate to https://alexchantastic.github.io/contrast-table/
-
When you first load the app, an example color palette will be loaded for you
-
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
-
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.