색상 대비와 읽기 쉬운 텍스트

Why Color Contrast Matters

WCAG Contrast Ratios Explained

/*
  WCAG Contrast Ratio Requirements

  Level AA (minimum standard):
  - Normal text (< 18pt regular, < 14pt bold): 4.5:1
  - Large text (≥ 18pt regular, ≥ 14pt bold): 3:1
  - UI components (borders, icons): 3:1

  Level AAA (enhanced standard):
  - Normal text: 7:1
  - Large text: 4.5:1

  Common examples:
  - black (#000) on white (#fff):     21:1  ✓ AAA
  - gray-900 on white:                ~18:1 ✓ AAA
  - gray-600 on white:                ~5.9:1 ✓ AA
  - gray-400 on white:                ~3.5:1 ✗ Fails AA
  - white on blue-500:                ~3.8:1 ✗ Fails AA for small text
*/

Tailwind's Color Palette and Contrast

<!--
  Safe combinations for AA compliance on white:
  text-gray-700 → 6.9:1  ✓
  text-gray-800 → 10.5:1 ✓
  text-gray-900 → 18.1:1 ✓
  text-blue-700 → 5.5:1  ✓
  text-blue-800 → 8.0:1  ✓

  Risky on white (check before using):
  text-blue-500 → 3.0:1  ✗ fails for normal text
  text-gray-500 → 4.1:1  ✗ barely fails
  text-gray-400 → 3.5:1  ✗ fails

  Safe for large text (3:1 minimum):
  text-blue-500 → 3.0:1  borderline for large text
-->

<p class="text-gray-700">Safe body text (6.9:1)</p>
<p class="text-gray-500">Check this! (4.1:1, barely fails)</p>

Checking Contrast Ratios

/*
  Tools for checking contrast:

  1. Chrome DevTools:
     - Select element
     - Go to Computed > Color
     - Click the color swatch → contrast ratio shown

  2. WebAIM Contrast Checker:
     - webaim.org/resources/contrastchecker/
     - Enter foreground + background hex
     - Shows AA and AAA pass/fail

  3. Axe DevTools browser extension:
     - Runs automated contrast checks on entire page
     - Lists all violations with exact ratios

  4. Storybook a11y addon:
     - checks every component story automatically
*/

Building a Contrast-Safe Color System

/*
  Contrast-safe token pairs (verified AA+)
  ==========================================

  On white (#fff) surface:
  text-text-primary = gray-900  → 18.1:1
  text-text-secondary = gray-700 → 6.9:1
  text-text-muted = gray-600    → 4.6:1 ✓ (just passes)
  bg-action-primary = blue-600  (white text: 5.1:1 ✓)
  bg-action-danger = red-600    (white text: 4.8:1 ✓)

  On gray-900 (#111827) surface:
  text = white or gray-100 → very high contrast
  text-muted = gray-300    → 7.2:1 ✓

  Check each pair at: webaim.org/resources/contrastchecker/
*/

Text Size and Contrast

<!-- blue-500 on white: 3.0:1 — borderline for large text -->

<!-- FAILS: small body text at blue-500 on white -->
<p class="text-blue-500 text-sm">This is hard to read (3.0:1 fails AA)</p>

<!-- PASSES: large heading at blue-500 on white -->
<h1 class="text-blue-500 text-3xl font-bold">
  Heading (3.0:1 passes for large text)
</h1>

<!-- BETTER: blue-700 meets AA for all text sizes -->
<p class="text-blue-700 text-sm">Safe body text (5.5:1)</p>

Non-Text Contrast

<!-- Input border contrast check -->

<!-- FAILS: border-gray-300 on white = ~2.5:1 (fails 3:1 for UI) -->
<input class="border border-gray-300 rounded px-3 py-2" />

<!-- PASSES: border-gray-400 on white = ~3.5:1 -->
<input class="border border-gray-400 rounded px-3 py-2" />

<!-- PASSES: icon in context -->
<button class="flex items-center gap-2">
  <!-- Meaningful icon: must meet 3:1 contrast -->
  <SearchIcon class="h-5 w-5 text-gray-700" />
  Search
</button>

Accessible Link Colors

<!-- Good: underline + adequate contrast -->
<p class="text-gray-800">
  Learn more about
  <a href='/docs' class="text-blue-700 underline hover:text-blue-900">
    Tailwind CSS
  </a>
  in the official docs.
</p>

<!-- Acceptable in nav: no underline, but distinctly colored -->
<nav>
  <a href='/about' class="text-blue-700 hover:text-blue-900 font-medium">
    About
  </a>
</nav>

<!-- Risky: remove underline from inline body text links -->
<!-- Visitors who are colorblind may not see link -->

Color as the Only Differentiator

<!-- BAD: color is the only difference -->
<div class="bg-red-100">Something went wrong.</div>
<div class="bg-green-100">Success!</div>

<!-- GOOD: color + icon + label -->
<div class="bg-red-50 border border-red-200 flex items-center gap-2 p-3 rounded-lg">
  <ExclamationTriangleIcon class="h-5 w-5 text-red-600 flex-shrink-0" />
  <span class="text-red-800 text-sm font-medium">Error: Something went wrong.</span>
</div>

<div class="bg-green-50 border border-green-200 flex items-center gap-2 p-3 rounded-lg">
  <CheckCircleIcon class="h-5 w-5 text-green-600 flex-shrink-0" />
  <span class="text-green-800 text-sm font-medium">Success! Changes saved.</span>
</div>

Dark Mode and Contrast

<!-- Verify dark mode contrast too -->
<div class="bg-white dark:bg-gray-900">
  <!-- Light mode: gray-800 on white = 12.6:1 ✓ -->
  <!-- Dark mode: gray-200 on gray-900 = 11.4:1 ✓ -->
  <h2 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">
    Heading
  </h2>

  <!-- Light mode: gray-600 on white = 4.6:1 ✓ -->
  <!-- Dark mode: gray-400 on gray-900 = 5.9:1 ✓ -->
  <p class="text-gray-600 dark:text-gray-400 text-sm">
    Secondary text
  </p>
</div>

Automated Contrast Auditing

// playwright accessibility audit in CI
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('homepage has no contrast violations', async ({ page }) => {
  await page.goto('http://localhost:3000');

  const accessibilityScanResults = await new AxeBuilder({ page })
    .withRules(['color-contrast'])  // focus on contrast only
    .analyze();

  expect(accessibilityScanResults.violations).toEqual([]);
});

// Run in CI:
// npx playwright test accessibility.spec.ts

Quick Check

Lesson Recap