← Back
Best viewed on a desktop. Please switch to a larger device.
Contrast

Accessible Colour Pairs

Every foreground/background combination shown with its WCAG contrast ratio and pass/fail level.

White on Black
21:1
#FFFFFF / #000000
AAA ✓
Yellow on Black
19.6:1
#FFFF00 / #000000
AAA ✓
Cyan on Black
16:1
#00FFFF / #000000
AAA ✓
Green on Black
15.3:1
#00FF00 / #000000
AAA ✓
Colour

High Contrast Palette

Pure saturated colours on pure black. The contrast ratio of every colour against #000000 is listed - all exceed WCAG AA, most exceed AAA.

Black
#000000
Base BG
Background only
White
#FFFFFF
21:1 · AAA
Primary text
Yellow
#FFFF00
19.6:1 · AAA
Focus, accent
Cyan
#00FFFF
16:1 · AAA
Info, links
Green
#00FF00
15.3:1 · AAA
Success, confirm
Type

Type System

Inter at high weight for legibility. Minimum 16px body. All text passes WCAG AAA. No italic for body text - reduced legibility for some users.

Display Accessible 48px · Inter 800
High weight = clear
H1 Clear. Direct. Readable. 32px · Inter 700
H2 / Section Every User. Every Device. 22px · Inter 700
Never below 700w
Body · Min 16px Body text at 16px minimum in Inter Regular. Line-height of 1.75 for comfortable reading. Never grey - always white on black for 21:1 ratio. Highlights use colour for emphasis alongside another indicator. 16px · Inter 400
1.75 line-height
Never below 16px
Label / Code WCAG 2.1 · Level AAA · Contrast: 21:1 12px · JetBrains Mono
Cyan = info category
Components

UI Components

All interactive elements have visible focus rings. All states (hover, active, error, success) use both colour and a secondary indicator.

// Buttons - try Tab key

// Input Fields

✓ Valid email address

// Status & Progress

✓ Live ⚠ Warning ✕ Error ℹ Info Inactive
Accessibility audit 100%
WCAG 2.1 AA 100%
Keyboard navigation 100%
Navigation

Navigation Patterns

// Accessible Navbar - try Tab key
// Tabs - keyboard accessible
Tab content is announced by screen readers. aria-selected, aria-controls, and role="tabpanel" create fully accessible tab interfaces.
Cards

Card Patterns

◈
WCAG 2.1
Perceivable

Information and UI components must be presentable to users in ways they can perceive - not invisible to all their senses.

Level A →
⌨
WCAG 2.1
Operable

UI components and navigation must be operable by keyboard alone. No interaction should require a mouse.

Level A →
📖
WCAG 2.1
Understandable

Information and UI operation must be understandable. Text must be readable and predictable. Error messages must be explicit.

Level AA →
Layout

Full App Layout

All Systems Go

Dashboard Overview

4,821
Users
↑ 12%
$48k
Revenue
↑ 8%
99.9%
Uptime
Nominal
2
Alerts
Action needed
WCAG

WCAG 2.1 Quick Reference

AA

4.5:1 - Normal Text

Minimum contrast ratio for body text at any size. The most common WCAG requirement. All white text on black far exceeds this at 21:1.

WCAG 1.4.3 · Success Criterion
AA

3:1 - Large Text & UI

Lower threshold for text 18pt+ (or 14pt bold) and for user interface components like borders, icons, and focus rings.

WCAG 1.4.3 · 1.4.11
AAA

7:1 - Enhanced Text

Highest contrast standard for text. Recommended for critical information. All colours in this palette exceed 7:1 - most exceed 15:1.

WCAG 1.4.6 · Enhanced
AA

Focus Visible - Always

Every interactive element must show a visible focus indicator. This page uses a 3px solid yellow ring with 3px offset - impossible to miss.

WCAG 2.4.7 · 2.4.11 (AA)
Principles

Core Principles

01 · CONTRAST

Never Below 4.5:1

Measure every text/background pair with a contrast checker before shipping. Grey text on dark backgrounds looks sophisticated and fails WCAG simultaneously. Use white.

02 · FOCUS

Focus Rings Are Non-Negotiable

Never use outline:none without a custom replacement. The yellow 3px ring in this system is the visual anchor for keyboard users. Remove it and the interface is unusable for millions of people.

03 · COLOUR

Colour Is Not the Only Signal

Error states use red border AND an error message with an icon. Success uses green AND a checkmark. Colour-blind users see shape, weight, and text - not just hue.

04 · SEMANTICS

HTML Structure Is the Interface

Correct use of role, aria-label, aria-live, aria-current, and heading hierarchy means the page is navigable by screen reader alone. Semantics precede styling.