Colours that cannot be read
27 pairs · 4 systemsThe published palettes of four design systems, with every colour measured against the background it ships on.
The finding. All eleven colours these systems publish as text pass 4.5:1. Six of the sixteen they publish as fills fail every threshold — Bootstrap’s warning at 1.63, its info at 1.95, Carbon’s yellow at 1.68. The systems are not at fault for that; a fill is not a text colour. What separates them is that only one of the four, GitHub’s Primer, publishes a separate darker foreground for each role, so its palette contains no colour that fails at the job it is offered for. Three of Bootstrap’s theme colours land between 4.50 and 4.53 against white, which is not an accident and leaves no margin at all.
The distinction the register is built on. A design system publishes colours for two different jobs: a fill, which goes behind something, and a foreground, which is the something. Most publish one colour per role and leave you to use it for both. One of the four — Primer — publishes a separate, darker colour for when a role has to carry text, and it is the only one with no ambiguity anywhere in its palette.
Every colour that fails as text
These 6 are below 3:1, which is the floor for large text and for anything that is not text at all. Every one of them is a fill — a colour meant to go behind something — and every one of them gets used as text somewhere.
The yellow at the bottom is GOV.UK's focus colour, at 1.34:1. That is not a failure — it is a background for a black focus ring, and it is doing its job. A number without its job is not a verdict, which is the whole reason the kind column exists.
| System | Role | Colour | On its own background | Ratio | Meets |
|---|---|---|---|---|---|
| Bootstrap 5Bootstrap | body texttext | #212529 | The quick brown fox | 15.42 | AAA |
| Bootstrap 5Bootstrap | primaryfill | #0d6efd | The quick brown fox | 4.5 | AA body |
| Bootstrap 5Bootstrap | secondaryfill | #6c757d | The quick brown fox | 4.68 | AA body |
| Bootstrap 5Bootstrap | successfill | #198754 | The quick brown fox | 4.53 | AA body |
| Bootstrap 5Bootstrap | infofill | #0dcaf0 | The quick brown fox | 1.95 | nothing |
| Bootstrap 5Bootstrap | warningfill | #ffc107 | The quick brown fox | 1.63 | nothing |
| Bootstrap 5Bootstrap | dangerfill | #dc3545 | The quick brown fox | 4.52 | AA body |
| PrimerGitHub | body texttext | #1f2328 | The quick brown fox | 15.79 | AAA |
| PrimerGitHub | muted texttext | #59636e | The quick brown fox | 6.11 | AA body |
| PrimerGitHub | linktext | #0969da | The quick brown fox | 5.19 | AA body |
| PrimerGitHub | accenttext | #0969da | The quick brown fox | 5.19 | AA body |
| PrimerGitHub | successtext | #1a7f37 | The quick brown fox | 5.07 | AA body |
| PrimerGitHub | attentiontext | #9a6700 | The quick brown fox | 4.86 | AA body |
| PrimerGitHub | dangertext | #d1242f | The quick brown fox | 5.24 | AA body |
| Carbon Design SystemIBM | body text (gray100)text | #161616 | The quick brown fox | 18.09 | AAA |
| Carbon Design SystemIBM | blue 60fill | #0f62fe | The quick brown fox | 5 | AA body |
| Carbon Design SystemIBM | green 60fill | #198038 | The quick brown fox | 5.01 | AA body |
| Carbon Design SystemIBM | green 50fill | #24a148 | The quick brown fox | 3.35 | large only |
| Carbon Design SystemIBM | red 60fill | #da1e28 | The quick brown fox | 5 | AA body |
| Carbon Design SystemIBM | yellow 30fill | #f1c21b | The quick brown fox | 1.68 | nothing |
| Carbon Design SystemIBM | orange 40fill | #ff832b | The quick brown fox | 2.46 | nothing |
| GOV.UK Design SystemGovernment Digital Service | body texttext | #0b0c0c | The quick brown fox | 19.58 | AAA |
| GOV.UK Design SystemGovernment Digital Service | linktext | #1d70b8 | The quick brown fox | 5.16 | AA body |
| GOV.UK Design SystemGovernment Digital Service | greenfill | #00703c | The quick brown fox | 6.2 | AA body |
| GOV.UK Design SystemGovernment Digital Service | redfill | #d4351c | The quick brown fox | 4.85 | AA body |
| GOV.UK Design SystemGovernment Digital Service | yellow (focus)fill | #ffdd00 | The quick brown fox | 1.34 | nothing |
| GOV.UK Design SystemGovernment Digital Service | light greyfill | #f3f2f1 | The quick brown fox | 1.11 | nothing |
Tuned to the line
Three of Bootstrap's theme colours land at 4.50, 4.53, 4.52 against white. A colour does not arrive at 4.50 by accident. Somebody measured, adjusted, and stopped the moment it cleared — which is a reasonable way to work and also means there is no margin left: any background that is not pure white puts them under.
Your own contrast table has the same property. A pair at 4.5 exactly is a pair that fails the first time somebody puts it on off-white.
Source. each publisher’s published token file, at the version named per row · open-source design systems · MIT, Apache-2.0 and OGL as published · retrieved 2026-09-03. This collection is derived · every ratio computed here.
The documents. WCAG 2.2 — contrast minimum (1.4.3) · Primer — colour primitives · GOV.UK — colour