Contrast
Generated by scripts/build.mjs: every pair the system relies on, in both
themes, measured with the WCAG 2 contrast formula. Translucent colours are
blended over their ground in sRGB, as browsers do; a translucent ground is
measured on both the page and the surface, and the worse counts.
Text needs 4.5:1; controls, focus and chart marks need 3:1 (WCAG 1.4.11).
Hairlines (line, line-strong) and the pattern are decorative, and not
listed.
| Theme | Foreground | Background | Ratio | Minimum | Result |
|---|---|---|---|---|---|
| light | text | bg | 17.05 | 4.5 | pass |
| light | text-muted | bg | 7.22 | 4.5 | pass |
| light | text | surface | 17.85 | 4.5 | pass |
| light | text-muted | surface | 7.56 | 4.5 | pass |
| light | text | surface-sunk | 16.28 | 4.5 | pass |
| light | text-muted | surface-sunk | 6.90 | 4.5 | pass |
| light | accent | bg | 5.19 | 4.5 | pass |
| light | accent | surface | 5.43 | 4.5 | pass |
| light | on-accent | accent | 5.43 | 4.5 | pass |
| light | on-accent | accent-hover | 7.73 | 4.5 | pass |
| light | on-accent | danger | 5.64 | 4.5 | pass |
| light | on-accent | danger-hover | 7.83 | 4.5 | pass |
| light | text | accent-wash | 14.81 | 4.5 | pass |
| light | text-muted | accent-wash | 6.28 | 4.5 | pass |
| light | accent | accent-wash | 4.51 | 4.5 | pass |
| light | danger | bg | 5.39 | 4.5 | pass |
| light | danger | surface | 5.64 | 4.5 | pass |
| light | danger | danger-wash | 4.71 | 4.5 | pass |
| light | text | danger-wash | 14.90 | 4.5 | pass |
| light | warning | bg | 6.10 | 4.5 | pass |
| light | warning | surface | 6.38 | 4.5 | pass |
| light | warning | warning-wash | 5.41 | 4.5 | pass |
| light | text | warning-wash | 15.12 | 4.5 | pass |
| light | success | bg | 5.19 | 4.5 | pass |
| light | success | surface | 5.43 | 4.5 | pass |
| light | success | success-wash | 4.51 | 4.5 | pass |
| light | text | success-wash | 14.81 | 4.5 | pass |
| light | info | bg | 5.22 | 4.5 | pass |
| light | info | surface | 5.47 | 4.5 | pass |
| light | info | info-wash | 4.67 | 4.5 | pass |
| light | text | info-wash | 15.25 | 4.5 | pass |
| light | on-inverse | inverse | 17.05 | 4.5 | pass |
| light | control | bg | 3.48 | 3 | pass |
| light | control | surface | 3.64 | 3 | pass |
| light | control | surface-sunk | 3.32 | 3 | pass |
| light | focus | bg | 5.19 | 3 | pass |
| light | focus | surface | 5.43 | 3 | pass |
| light | focus | surface-sunk | 4.95 | 3 | pass |
| light | focus | accent-wash | 4.51 | 3 | pass |
| light | focus-on-inverse | inverse | 10.86 | 3 | pass |
| light | chart-1 | surface | 5.33 | 3 | pass |
| light | chart-1 | bg | 5.09 | 3 | pass |
| light | chart-2 | surface | 4.13 | 3 | pass |
| light | chart-2 | bg | 3.95 | 3 | pass |
| light | chart-3 | surface | 4.85 | 3 | pass |
| light | chart-3 | bg | 4.64 | 3 | pass |
| light | chart-4 | surface | 5.65 | 3 | pass |
| light | chart-4 | bg | 5.39 | 3 | pass |
| light | tint.teal.ink | tint.teal.bg | 6.73 | 4.5 | pass |
| light | tint.green.ink | tint.green.bg | 6.49 | 4.5 | pass |
| light | tint.yellow.ink | tint.yellow.bg | 6.38 | 4.5 | pass |
| light | tint.orange.ink | tint.orange.bg | 6.38 | 4.5 | pass |
| light | tint.pink.ink | tint.pink.bg | 6.71 | 4.5 | pass |
| light | tint.purple.ink | tint.purple.bg | 7.39 | 4.5 | pass |
| light | tint.blue.ink | tint.blue.bg | 7.15 | 4.5 | pass |
| light | tint.cyan.ink | tint.cyan.bg | 6.49 | 4.5 | pass |
| light | syntax.keyword | surface-sunk | 6.37 | 4.5 | pass |
| light | syntax.keyword | surface | 6.98 | 4.5 | pass |
| light | syntax.keyword | accent-wash | 5.80 | 4.5 | pass |
| light | syntax.string | surface-sunk | 6.50 | 4.5 | pass |
| light | syntax.string | surface | 7.13 | 4.5 | pass |
| light | syntax.string | accent-wash | 5.92 | 4.5 | pass |
| light | syntax.number | surface-sunk | 6.66 | 4.5 | pass |
| light | syntax.number | surface | 7.31 | 4.5 | pass |
| light | syntax.number | accent-wash | 6.06 | 4.5 | pass |
| light | syntax.comment | surface-sunk | 5.44 | 4.5 | pass |
| light | syntax.comment | surface | 5.97 | 4.5 | pass |
| light | syntax.comment | accent-wash | 4.95 | 4.5 | pass |
| light | syntax.function | surface-sunk | 6.11 | 4.5 | pass |
| light | syntax.function | surface | 6.70 | 4.5 | pass |
| light | syntax.function | accent-wash | 5.56 | 4.5 | pass |
| light | syntax.tag | surface-sunk | 4.99 | 4.5 | pass |
| light | syntax.tag | surface | 5.47 | 4.5 | pass |
| light | syntax.tag | accent-wash | 4.54 | 4.5 | pass |
| light | syntax.attribute | surface-sunk | 7.19 | 4.5 | pass |
| light | syntax.attribute | surface | 7.88 | 4.5 | pass |
| light | syntax.attribute | accent-wash | 6.54 | 4.5 | pass |
| dark | text | bg | 15.17 | 4.5 | pass |
| dark | text-muted | bg | 7.99 | 4.5 | pass |
| dark | text | surface | 14.28 | 4.5 | pass |
| dark | text-muted | surface | 7.52 | 4.5 | pass |
| dark | text | surface-sunk | 13.25 | 4.5 | pass |
| dark | text-muted | surface-sunk | 6.98 | 4.5 | pass |
| dark | accent | bg | 11.41 | 4.5 | pass |
| dark | accent | surface | 10.74 | 4.5 | pass |
| dark | on-accent | accent | 11.41 | 4.5 | pass |
| dark | on-accent | accent-hover | 14.77 | 4.5 | pass |
| dark | on-accent | danger | 6.02 | 4.5 | pass |
| dark | on-accent | danger-hover | 8.86 | 4.5 | pass |
| dark | text | accent-wash | 11.05 | 4.5 | pass |
| dark | text-muted | accent-wash | 5.82 | 4.5 | pass |
| dark | accent | accent-wash | 8.31 | 4.5 | pass |
| dark | danger | bg | 6.02 | 4.5 | pass |
| dark | danger | surface | 5.67 | 4.5 | pass |
| dark | danger | danger-wash | 4.74 | 4.5 | pass |
| dark | text | danger-wash | 11.94 | 4.5 | pass |
| dark | warning | bg | 9.97 | 4.5 | pass |
| dark | warning | surface | 9.39 | 4.5 | pass |
| dark | warning | warning-wash | 7.45 | 4.5 | pass |
| dark | text | warning-wash | 11.33 | 4.5 | pass |
| dark | success | bg | 11.41 | 4.5 | pass |
| dark | success | surface | 10.74 | 4.5 | pass |
| dark | success | success-wash | 8.31 | 4.5 | pass |
| dark | text | success-wash | 11.05 | 4.5 | pass |
| dark | info | bg | 10.09 | 4.5 | pass |
| dark | info | surface | 9.50 | 4.5 | pass |
| dark | info | info-wash | 7.47 | 4.5 | pass |
| dark | text | info-wash | 11.23 | 4.5 | pass |
| dark | on-inverse | inverse | 15.17 | 4.5 | pass |
| dark | control | bg | 5.15 | 3 | pass |
| dark | control | surface | 4.85 | 3 | pass |
| dark | control | surface-sunk | 4.49 | 3 | pass |
| dark | focus | bg | 11.41 | 3 | pass |
| dark | focus | surface | 10.74 | 3 | pass |
| dark | focus | surface-sunk | 9.96 | 3 | pass |
| dark | focus | accent-wash | 8.31 | 3 | pass |
| dark | focus-on-inverse | inverse | 4.40 | 3 | pass |
| dark | chart-1 | surface | 6.00 | 3 | pass |
| dark | chart-1 | bg | 6.38 | 3 | pass |
| dark | chart-2 | surface | 5.50 | 3 | pass |
| dark | chart-2 | bg | 5.84 | 3 | pass |
| dark | chart-3 | surface | 4.83 | 3 | pass |
| dark | chart-3 | bg | 5.14 | 3 | pass |
| dark | chart-4 | surface | 4.86 | 3 | pass |
| dark | chart-4 | bg | 5.16 | 3 | pass |
| dark | tint.teal.ink | tint.teal.bg | 8.88 | 4.5 | pass |
| dark | tint.green.ink | tint.green.bg | 9.14 | 4.5 | pass |
| dark | tint.yellow.ink | tint.yellow.bg | 8.87 | 4.5 | pass |
| dark | tint.orange.ink | tint.orange.bg | 7.68 | 4.5 | pass |
| dark | tint.pink.ink | tint.pink.bg | 7.36 | 4.5 | pass |
| dark | tint.purple.ink | tint.purple.bg | 7.28 | 4.5 | pass |
| dark | tint.blue.ink | tint.blue.bg | 7.15 | 4.5 | pass |
| dark | tint.cyan.ink | tint.cyan.bg | 8.71 | 4.5 | pass |
| dark | syntax.keyword | surface-sunk | 9.26 | 4.5 | pass |
| dark | syntax.keyword | surface | 9.98 | 4.5 | pass |
| dark | syntax.keyword | accent-wash | 7.72 | 4.5 | pass |
| dark | syntax.string | surface-sunk | 11.66 | 4.5 | pass |
| dark | syntax.string | surface | 12.57 | 4.5 | pass |
| dark | syntax.string | accent-wash | 9.72 | 4.5 | pass |
| dark | syntax.number | surface-sunk | 9.71 | 4.5 | pass |
| dark | syntax.number | surface | 10.46 | 4.5 | pass |
| dark | syntax.number | accent-wash | 8.09 | 4.5 | pass |
| dark | syntax.comment | surface-sunk | 7.07 | 4.5 | pass |
| dark | syntax.comment | surface | 7.63 | 4.5 | pass |
| dark | syntax.comment | accent-wash | 5.90 | 4.5 | pass |
| dark | syntax.function | surface-sunk | 9.08 | 4.5 | pass |
| dark | syntax.function | surface | 9.79 | 4.5 | pass |
| dark | syntax.function | accent-wash | 7.57 | 4.5 | pass |
| dark | syntax.tag | surface-sunk | 11.07 | 4.5 | pass |
| dark | syntax.tag | surface | 11.93 | 4.5 | pass |
| dark | syntax.tag | accent-wash | 9.23 | 4.5 | pass |
| dark | syntax.attribute | surface-sunk | 9.03 | 4.5 | pass |
| dark | syntax.attribute | surface | 9.73 | 4.5 | pass |
| dark | syntax.attribute | accent-wash | 7.53 | 4.5 | pass |