Flint Foundations
Contrast
The build measures 70 pairings in each mode and fails if a required one drops below its bar. This page is that report, read from contrast.json.
Text clears 7:1 (WCAG AAA) as Flint's internal bar. Control edges, focus rings and chart marks clear 3:1. Decorative borders and disabled text are measured but advisory: WCAG exempts them. Flint's published claim stays WCAG 2.2 AA. 134 of 140 checks pass outright; the rest are advisory.
Light
| Pairing | Foreground | Background | Ratio | Needs | Result |
|---|---|---|---|---|---|
| heading on page | text.heading | surface.page | 13.86:1 | 7:1 | Pass |
| heading on default | text.heading | surface.default | 14.50:1 | 7:1 | Pass |
| default on page | text.default | surface.page | 13.98:1 | 7:1 | Pass |
| default on default | text.default | surface.default | 14.63:1 | 7:1 | Pass |
| default on subtle | text.default | surface.subtle | 13.35:1 | 7:1 | Pass |
| muted on page | text.muted | surface.page | 9.90:1 | 7:1 | Pass |
| muted on default | text.muted | surface.default | 10.35:1 | 7:1 | Pass |
| muted on subtle | text.muted | surface.subtle | 9.45:1 | 7:1 | Pass |
| link on page | text.link | surface.page | 7.47:1 | 7:1 | Pass |
| link on default | text.link | surface.default | 7.82:1 | 7:1 | Pass |
| placeholder on default | text.placeholder | surface.default | 10.35:1 | 7:1 | Pass |
| placeholder on page | text.placeholder | surface.page | 9.90:1 | 7:1 | Pass |
| success.text on surface | feedback.success.text | feedback.success.surface | 8.70:1 | 7:1 | Pass |
| warning.text on surface | feedback.warning.text | feedback.warning.surface | 8.75:1 | 7:1 | Pass |
| error.text on surface | feedback.error.text | feedback.error.surface | 9.16:1 | 7:1 | Pass |
| info.text on surface | feedback.info.text | feedback.info.surface | 10.33:1 | 7:1 | Pass |
| success.onSolid on solid | feedback.success.onSolid | feedback.success.solid | 7.13:1 | 7:1 | Pass |
| warning.onSolid on solid | feedback.warning.onSolid | feedback.warning.solid | 7.09:1 | 7:1 | Pass |
| error.onSolid on solid | feedback.error.onSolid | feedback.error.solid | 8.31:1 | 7:1 | Pass |
| info.onSolid on solid | feedback.info.onSolid | feedback.info.solid | 7.82:1 | 7:1 | Pass |
| onPrimary on primary | action.onPrimary | action.primary | 7.82:1 | 7:1 | Pass |
| onDanger on danger | action.onDanger | action.danger | 8.31:1 | 7:1 | Pass |
| aaaText on aaaSurface | accent.aaaText | accent.aaaSurface | 7.57:1 | 7:1 | Pass |
| onAaa on aaaSolid | accent.onAaa | accent.aaaSolid | 7.10:1 | 7:1 | Pass |
| cyan accent on default | accent.cyan | surface.default | 9.46:1 | 7:1 | Pass |
| cyan accent on page | accent.cyan | surface.page | 9.04:1 | 7:1 | Pass |
| selected.text on surface | selected.text | selected.surface | 7.18:1 | 7:1 | Pass |
| control border on default | border.control | surface.default | 4.76:1 | 3:1 | Pass |
| control hover border on default | border.controlHover | surface.default | 7.58:1 | 3:1 | Pass |
| control hover border on page | border.controlHover | surface.page | 7.24:1 | 3:1 | Pass |
| control border on page | border.control | surface.page | 4.55:1 | 3:1 | Pass |
| error border on default | border.error | surface.default | 4.83:1 | 3:1 | Pass |
| error border on page | border.error | surface.page | 4.62:1 | 3:1 | Pass |
| disabled text on disabledBg | action.disabled | action.disabledBg | 4.34:1 | 4.5:1 | Advisory |
| focus border on default | border.focus | surface.default | 7.82:1 | 3:1 | Pass |
| focusRing on page | action.focusRing | surface.page | 7.47:1 | 3:1 | Pass |
| primary on page (accent) | action.primary | surface.page | 7.47:1 | 3:1 | Pass |
| border.default on default | border.default | surface.default | 1.23:1 | 3:1 | Advisory |
| border.strong on default | border.strong | surface.default | 1.48:1 | 3:1 | Advisory |
| chart.1 on default | chart.1 | surface.default | 6.47:1 | 3:1 | Pass |
| chart.1 on page | chart.1 | surface.page | 6.18:1 | 3:1 | Pass |
| chart.2 on default | chart.2 | surface.default | 5.02:1 | 3:1 | Pass |
| chart.2 on page | chart.2 | surface.page | 4.80:1 | 3:1 | Pass |
| chart.3 on default | chart.3 | surface.default | 5.70:1 | 3:1 | Pass |
| chart.3 on page | chart.3 | surface.page | 5.45:1 | 3:1 | Pass |
| chart.4 on default | chart.4 | surface.default | 5.02:1 | 3:1 | Pass |
| chart.4 on page | chart.4 | surface.page | 4.79:1 | 3:1 | Pass |
| chart.5 on default | chart.5 | surface.default | 4.83:1 | 3:1 | Pass |
| chart.5 on page | chart.5 | surface.page | 4.62:1 | 3:1 | Pass |
| button primary label | component.button.primary.fg | component.button.primary.bg | 7.82:1 | 7:1 | Pass |
| button primary hover label | component.button.primary.fg | component.button.primary.bgHover | 11.24:1 | 7:1 | Pass |
| button secondary label | component.button.secondary.fg | component.button.secondary.bg | 7.82:1 | 7:1 | Pass |
| button secondary hover label | component.button.secondary.fg | component.button.secondary.bgHover | 7.13:1 | 7:1 | Pass |
| button secondary edge | component.button.secondary.border | surface.page | 4.55:1 | 3:1 | Pass |
| button danger label | component.button.danger.fg | component.button.danger.bg | 8.31:1 | 7:1 | Pass |
| button danger hover label | component.button.danger.fg | component.button.danger.bgHover | 10.02:1 | 7:1 | Pass |
| button text label | component.button.text.fg | surface.page | 7.47:1 | 7:1 | Pass |
| button text hover label | component.button.text.fg | component.button.text.bgHover | 7.13:1 | 7:1 | Pass |
| button disabled label | component.button.disabled.fg | component.button.disabled.bg | 4.34:1 | 4.5:1 | Advisory |
| input text | component.input.fg | component.input.bg | 14.63:1 | 7:1 | Pass |
| input placeholder | component.input.placeholder | component.input.bg | 10.35:1 | 7:1 | Pass |
| input edge | component.input.border | component.input.bg | 4.76:1 | 3:1 | Pass |
| input hover edge | component.input.borderHover | component.input.bg | 7.58:1 | 3:1 | Pass |
| input focus edge | component.input.borderFocus | component.input.bg | 7.82:1 | 3:1 | Pass |
| input error edge | component.input.borderError | component.input.bg | 4.83:1 | 3:1 | Pass |
| checkbox edge | component.checkbox.border | surface.default | 4.76:1 | 3:1 | Pass |
| checkbox checked fill | component.checkbox.checkedBg | surface.default | 7.82:1 | 3:1 | Pass |
| checkbox check mark | component.checkbox.checkedFg | component.checkbox.checkedBg | 7.82:1 | 3:1 | Pass |
| focus ring on page | component.focus.ring.color | surface.page | 7.47:1 | 3:1 | Pass |
| focus ring on default | component.focus.ring.color | surface.default | 7.82:1 | 3:1 | Pass |
Dark
| Pairing | Foreground | Background | Ratio | Needs | Result |
|---|---|---|---|---|---|
| heading on page | text.heading | surface.page | 17.39:1 | 7:1 | Pass |
| heading on default | text.heading | surface.default | 15.89:1 | 7:1 | Pass |
| default on page | text.default | surface.page | 12.26:1 | 7:1 | Pass |
| default on default | text.default | surface.default | 11.21:1 | 7:1 | Pass |
| default on subtle | text.default | surface.subtle | 9.86:1 | 7:1 | Pass |
| muted on page | text.muted | surface.page | 9.40:1 | 7:1 | Pass |
| muted on default | text.muted | surface.default | 8.60:1 | 7:1 | Pass |
| muted on subtle | text.muted | surface.subtle | 7.56:1 | 7:1 | Pass |
| link on page | text.link | surface.page | 10.49:1 | 7:1 | Pass |
| link on default | text.link | surface.default | 9.59:1 | 7:1 | Pass |
| placeholder on default | text.placeholder | surface.default | 8.60:1 | 7:1 | Pass |
| placeholder on page | text.placeholder | surface.page | 9.40:1 | 7:1 | Pass |
| success.text on surface | feedback.success.text | feedback.success.surface | 7.52:1 | 7:1 | Pass |
| warning.text on surface | feedback.warning.text | feedback.warning.surface | 7.28:1 | 7:1 | Pass |
| error.text on surface | feedback.error.text | feedback.error.surface | 8.20:1 | 7:1 | Pass |
| info.text on surface | feedback.info.text | feedback.info.surface | 8.04:1 | 7:1 | Pass |
| success.onSolid on solid | feedback.success.onSolid | feedback.success.solid | 10.86:1 | 7:1 | Pass |
| warning.onSolid on solid | feedback.warning.onSolid | feedback.warning.solid | 11.34:1 | 7:1 | Pass |
| error.onSolid on solid | feedback.error.onSolid | feedback.error.solid | 9.97:1 | 7:1 | Pass |
| info.onSolid on solid | feedback.info.onSolid | feedback.info.solid | 10.49:1 | 7:1 | Pass |
| onPrimary on primary | action.onPrimary | action.primary | 10.49:1 | 7:1 | Pass |
| onDanger on danger | action.onDanger | action.danger | 9.97:1 | 7:1 | Pass |
| aaaText on aaaSurface | accent.aaaText | accent.aaaSurface | 7.89:1 | 7:1 | Pass |
| onAaa on aaaSolid | accent.onAaa | accent.aaaSolid | 10.25:1 | 7:1 | Pass |
| cyan accent on default | accent.cyan | surface.default | 10.38:1 | 7:1 | Pass |
| cyan accent on page | accent.cyan | surface.page | 11.35:1 | 7:1 | Pass |
| selected.text on surface | selected.text | selected.surface | 7.91:1 | 7:1 | Pass |
| control border on default | border.control | surface.default | 3.77:1 | 3:1 | Pass |
| control hover border on default | border.controlHover | surface.default | 6.84:1 | 3:1 | Pass |
| control hover border on page | border.controlHover | surface.page | 7.48:1 | 3:1 | Pass |
| control border on page | border.control | surface.page | 4.12:1 | 3:1 | Pass |
| error border on default | border.error | surface.default | 6.25:1 | 3:1 | Pass |
| error border on page | border.error | surface.page | 6.84:1 | 3:1 | Pass |
| disabled text on disabledBg | action.disabled | action.disabledBg | 4.40:1 | 4.5:1 | Advisory |
| focus border on default | border.focus | surface.default | 6.80:1 | 3:1 | Pass |
| focusRing on page | action.focusRing | surface.page | 7.44:1 | 3:1 | Pass |
| primary on page (accent) | action.primary | surface.page | 10.49:1 | 3:1 | Pass |
| border.default on default | border.default | surface.default | 3.77:1 | 3:1 | Pass |
| border.strong on default | border.strong | surface.default | 8.60:1 | 3:1 | Pass |
| chart.1 on default | chart.1 | surface.default | 6.80:1 | 3:1 | Pass |
| chart.1 on page | chart.1 | surface.page | 7.44:1 | 3:1 | Pass |
| chart.2 on default | chart.2 | surface.default | 10.36:1 | 3:1 | Pass |
| chart.2 on page | chart.2 | surface.page | 11.34:1 | 3:1 | Pass |
| chart.3 on default | chart.3 | surface.default | 6.36:1 | 3:1 | Pass |
| chart.3 on page | chart.3 | surface.page | 6.95:1 | 3:1 | Pass |
| chart.4 on default | chart.4 | surface.default | 9.93:1 | 3:1 | Pass |
| chart.4 on page | chart.4 | surface.page | 10.86:1 | 3:1 | Pass |
| chart.5 on default | chart.5 | surface.default | 6.25:1 | 3:1 | Pass |
| chart.5 on page | chart.5 | surface.page | 6.84:1 | 3:1 | Pass |
| button primary label | component.button.primary.fg | component.button.primary.bg | 10.49:1 | 7:1 | Pass |
| button primary hover label | component.button.primary.fg | component.button.primary.bgHover | 13.32:1 | 7:1 | Pass |
| button secondary label | component.button.secondary.fg | component.button.secondary.bg | 9.59:1 | 7:1 | Pass |
| button secondary hover label | component.button.secondary.fg | component.button.secondary.bgHover | 8.44:1 | 7:1 | Pass |
| button secondary edge | component.button.secondary.border | surface.page | 4.12:1 | 3:1 | Pass |
| button danger label | component.button.danger.fg | component.button.danger.bg | 9.97:1 | 7:1 | Pass |
| button danger hover label | component.button.danger.fg | component.button.danger.bgHover | 13.08:1 | 7:1 | Pass |
| button text label | component.button.text.fg | surface.page | 10.49:1 | 7:1 | Pass |
| button text hover label | component.button.text.fg | component.button.text.bgHover | 8.44:1 | 7:1 | Pass |
| button disabled label | component.button.disabled.fg | component.button.disabled.bg | 4.40:1 | 4.5:1 | Advisory |
| input text | component.input.fg | component.input.bg | 11.21:1 | 7:1 | Pass |
| input placeholder | component.input.placeholder | component.input.bg | 8.60:1 | 7:1 | Pass |
| input edge | component.input.border | component.input.bg | 3.77:1 | 3:1 | Pass |
| input hover edge | component.input.borderHover | component.input.bg | 6.84:1 | 3:1 | Pass |
| input focus edge | component.input.borderFocus | component.input.bg | 6.80:1 | 3:1 | Pass |
| input error edge | component.input.borderError | component.input.bg | 6.25:1 | 3:1 | Pass |
| checkbox edge | component.checkbox.border | surface.default | 3.77:1 | 3:1 | Pass |
| checkbox checked fill | component.checkbox.checkedBg | surface.default | 9.59:1 | 3:1 | Pass |
| checkbox check mark | component.checkbox.checkedFg | component.checkbox.checkedBg | 10.49:1 | 3:1 | Pass |
| focus ring on page | component.focus.ring.color | surface.page | 7.44:1 | 3:1 | Pass |
| focus ring on default | component.focus.ring.color | surface.default | 6.80:1 | 3:1 | Pass |