@@ -478,17 +483,32 @@ function Contrast({
background={background.hex}
/>
- = 4.5} />
- = 3} />
- = 7} />
- = 4.5} />
+ {results.map((result) => (
+
+ + {check.kind === 'text' + ? 'Text thresholds apply only to this assigned foreground and background pair.' + : check.kind === 'nonText' + ? 'This checks non-text color contrast only. Component size, shape, state, and other accessibility requirements are not evaluated.' + : 'This checks one adjacent-color pair. Size, area, thickness, visibility, and focused-versus-unfocused appearance are not evaluated.'} +
) })}
- >
+export type ContrastCheckKind = 'text' | 'nonText' | 'focus'
+
+export const textContrastThresholds = {
+ aaNormal: 4.5,
+ aaLarge: 3,
+ aaaNormal: 7,
+ aaaLarge: 4.5,
+} as const
+export const nonTextContrastThreshold = 3
+
+export interface ContrastResult {
+ label: string
+ threshold: number
+ pass: boolean
+}
export const roleLabels: Record = {
pageBackground: 'Page background',
@@ -30,6 +45,7 @@ export const roleChecks: Array<{
label: string
foreground: PaletteRole
background: PaletteRole
+ kind: ContrastCheckKind
preview: 'page' | 'surface' | 'action' | 'border' | 'focus'
}> = [
{
@@ -37,6 +53,7 @@ export const roleChecks: Array<{
label: 'Primary text on page background',
foreground: 'primaryText',
background: 'pageBackground',
+ kind: 'text',
preview: 'page',
},
{
@@ -44,6 +61,7 @@ export const roleChecks: Array<{
label: 'Secondary text on surface',
foreground: 'secondaryText',
background: 'surface',
+ kind: 'text',
preview: 'surface',
},
{
@@ -51,6 +69,7 @@ export const roleChecks: Array<{
label: 'Action text on primary action',
foreground: 'actionText',
background: 'primaryAction',
+ kind: 'text',
preview: 'action',
},
{
@@ -58,6 +77,7 @@ export const roleChecks: Array<{
label: 'Border against surface',
foreground: 'border',
background: 'surface',
+ kind: 'nonText',
preview: 'border',
},
{
@@ -65,6 +85,7 @@ export const roleChecks: Array<{
label: 'Focus indicator against page background',
foreground: 'focusIndicator',
background: 'pageBackground',
+ kind: 'focus',
preview: 'focus',
},
{
@@ -72,6 +93,7 @@ export const roleChecks: Array<{
label: 'Focus indicator against surface',
foreground: 'focusIndicator',
background: 'surface',
+ kind: 'focus',
preview: 'focus',
},
]
@@ -106,6 +128,46 @@ export function contrastRatio(
return (lighter + 0.05) / (darker + 0.05)
}
+export function resultsForContrastCheck(
+ kind: ContrastCheckKind,
+ ratio: number,
+): ContrastResult[] {
+ if (kind === 'text') {
+ return [
+ {
+ label: 'AA normal text',
+ threshold: textContrastThresholds.aaNormal,
+ pass: ratio >= textContrastThresholds.aaNormal,
+ },
+ {
+ label: 'AA large text',
+ threshold: textContrastThresholds.aaLarge,
+ pass: ratio >= textContrastThresholds.aaLarge,
+ },
+ {
+ label: 'AAA normal text',
+ threshold: textContrastThresholds.aaaNormal,
+ pass: ratio >= textContrastThresholds.aaaNormal,
+ },
+ {
+ label: 'AAA large text',
+ threshold: textContrastThresholds.aaaLarge,
+ pass: ratio >= textContrastThresholds.aaaLarge,
+ },
+ ]
+ }
+ return [
+ {
+ label:
+ kind === 'focus'
+ ? 'Focus-indicator color contrast'
+ : 'Non-text component contrast',
+ threshold: nonTextContrastThreshold,
+ pass: ratio >= nonTextContrastThreshold,
+ },
+ ]
+}
+
export function pruneRoleAssignments(
assignments: RoleAssignments,
colors: Color[],
diff --git a/frontend/src/exporters.test.ts b/frontend/src/exporters.test.ts
index d1ae1ab..e215851 100644
--- a/frontend/src/exporters.test.ts
+++ b/frontend/src/exporters.test.ts
@@ -53,6 +53,12 @@ describe('browser palette exporters', () => {
expect(output).not.toContain('
Advanced: all-pairs contrast matrix
+Advanced: all-pairs text contrast matrix
++ AA and AAA badges below apply text-contrast thresholds to every + palette color pair for exploration. They do not classify non-text + components or focus indicators. +
{analysis.accessibility.pairs.map((pair) => (
))}
diff --git a/frontend/src/components/ui/StatusBadge.tsx b/frontend/src/components/ui/StatusBadge.tsx
index 9a6e265..9aea53d 100644
--- a/frontend/src/components/ui/StatusBadge.tsx
+++ b/frontend/src/components/ui/StatusBadge.tsx
@@ -6,9 +6,15 @@ export type StatusVariant =
export default function StatusBadge({
children,
variant = 'neutral',
+ title,
}: {
children: ReactNode
variant?: StatusVariant
+ title?: string
}) {
- return {children}
+ return (
+
+ {children}
+
+ )
}
diff --git a/frontend/src/contrast.test.ts b/frontend/src/contrast.test.ts
index a1c4281..90f9eab 100644
--- a/frontend/src/contrast.test.ts
+++ b/frontend/src/contrast.test.ts
@@ -1,6 +1,10 @@
import { describe, expect, it } from 'vitest'
import { blue, red } from './test/fixtures'
-import { contrastRatio, pruneRoleAssignments } from './contrast'
+import {
+ contrastRatio,
+ pruneRoleAssignments,
+ resultsForContrastCheck,
+} from './contrast'
describe('role contrast state', () => {
it('calculates WCAG contrast from RGB values', () => {
@@ -10,8 +14,38 @@ describe('role contrast state', () => {
{ rgb: { r: 0, g: 0, b: 0 } },
),
).toBe(21)
+ expect(
+ contrastRatio(
+ { rgb: { r: 118, g: 118, b: 118 } },
+ { rgb: { r: 255, g: 255, b: 255 } },
+ ),
+ ).toBeCloseTo(4.5422, 3)
+ expect(
+ contrastRatio(
+ { rgb: { r: 148, g: 148, b: 148 } },
+ { rgb: { r: 255, g: 255, b: 255 } },
+ ),
+ ).toBeCloseTo(3.0335, 3)
})
+ it('uses text thresholds only for text checks', () => {
+ expect(resultsForContrastCheck('text', 4.5)).toEqual([
+ { label: 'AA normal text', threshold: 4.5, pass: true },
+ { label: 'AA large text', threshold: 3, pass: true },
+ { label: 'AAA normal text', threshold: 7, pass: false },
+ { label: 'AAA large text', threshold: 4.5, pass: true },
+ ])
+ })
+
+ it.each(['nonText', 'focus'] as const)(
+ 'uses the 3:1 non-text threshold for %s checks',
+ (kind) => {
+ expect(resultsForContrastCheck(kind, 3)[0].pass).toBe(true)
+ expect(resultsForContrastCheck(kind, 2.99)[0].pass).toBe(false)
+ expect(resultsForContrastCheck(kind, 3)[0].label).not.toMatch(/AA|AAA/)
+ },
+ )
+
it('keeps only role assignments whose color still exists', () => {
expect(
pruneRoleAssignments(
diff --git a/frontend/src/contrast.ts b/frontend/src/contrast.ts
index c6accde..d1cda65 100644
--- a/frontend/src/contrast.ts
+++ b/frontend/src/contrast.ts
@@ -13,6 +13,21 @@ export const paletteRoles = [
export type PaletteRole = (typeof paletteRoles)[number]
export type RoleAssignments = Partial{pair.ratio.toFixed(2)}:1
-