Does RamosLabs indigo (#4f46e5) meet WCAG contrast requirements?

What WCAG asks for

The thresholds below are the ones used on this page. Large-scale text means at least 18 point, or 14 point bold^[5].

Measured indigo pairings

Values from the source tokens^[1]; ratios computed with the script in the last section^[8].

A primary button with a visible focus ring

--shadow-focus is a 2px white gap followed by a ring in #4f46e5^[1]. Against the white gap and the page the ring measures 6.29:1^[8], above the 3:1 asked of UI components^[7]. The DS rule is to never remove the focus outline without an equivalent replacement^[2].

@import '@ramoslabs/tokens/css';

.btn-primary {
  background: var(--color-primary);
  color: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

Verify a pair with the MCP check_contrast tool

The DS MCP server exposes check_contrast among seven read-only tools, over Streamable HTTP with no authentication, at https://design.ramoslabs.com/mcp^[3]. Call it with a foreground and a background and read the verdicts it returns.

Reproduce the numbers

The ratios on this page come from the script below, which applies the WCAG definitions of relative luminance and contrast ratio^[4] to the published token values. Run it in a project that has @ramoslabs/tokens installed.

import { readFileSync } from 'node:fs'

// WCAG 2.2 relative luminance and contrast ratio, applied to the published token values.
const lin = (c) => ((c /= 255) <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)
const lum = (hex) => {
  const n = parseInt(hex.slice(1), 16)
  return 0.2126 * lin((n >> 16) & 255) + 0.7152 * lin((n >> 8) & 255) + 0.0722 * lin(n & 255)
}
const ratio = (a, b) => {
  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

const tokens = JSON.parse(readFileSync('node_modules/@ramoslabs/tokens/dist/tokens.json', 'utf8'))
const pair = (fg, bg) => ratio(tokens[fg], tokens[bg]).toFixed(2)

console.log(pair('color-text-muted', 'color-surface')) // 4.76
console.log(pair('color-primary', 'color-surface')) // 6.29

Frequently asked questions

Is #4f46e5 accessible on a white background?

For AA, yes: it measures 6.29:1^[8], above 4.5:1 for text^[5] and 3:1 for UI components^[7]. It is below the 7:1 of AAA for text^[6].

Can I use indigo 300 for text on white?

No. --color-indigo-300 (#a5b4fc) measures 1.99:1 on white^[8], below both 4.5:1^[5] and 3:1^[7].

Which indigo should I use when AAA is required?

Use --color-primary-dark (#4338ca)^[1]: white text on it measures 7.90:1^[8], which reaches 7:1^[6].

Can I put white text on the primary button?

Yes. White on --color-primary measures 6.29:1^[8], which meets AA for text^[5].

Does the primary indigo have enough contrast for a focus ring?

Yes by the numbers: 6.29:1 against white^[8], above the 3:1 asked of UI components^[7]. The DS focus ring uses it^[1].

How can I check a color pair programmatically?

Use the check_contrast tool on the DS MCP server^[3], or run the script on this page against the token values^[4].