Accessibility is not optional. In many jurisdictions it is legally required, and even where it is not, building inaccessible websites means excluding users, which is bad design by definition.
The most foundational accessibility requirement for visual design is color contrast. And the standard that governs it is WCAG, the Web Content Accessibility Guidelines.
What Is a Contrast Ratio?
A contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical colors, zero contrast) to 21:1 (pure black on pure white, maximum contrast). The formula uses perceived brightness, not simple RGB difference. That is why a medium gray on white can fail even though the hex codes look far apart.
AA vs. AAA: What Do the Levels Mean?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). This is the baseline, the minimum you should aim for on every text element.
WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. This is the enhanced level, harder to hit with mid-tone colors, but the gold standard for critical content.
Why Mid-Tones Are the Problem
The hardest part of meeting contrast requirements is not your primary blue or your body text black. It is the medium-saturation colors in between. A medium blue (#4f46e5) on white gives about 6.1:1, solid AA. But a lighter periwinkle (#a78bfa) on white drops to about 3.2:1, which fails AA entirely.
This is exactly why PaletteRx checks every possible color pair in your palette. You cannot eyeball contrast ratios reliably.
The Base Color Solution
The easiest way to guarantee every color in your palette has at least one accessible pair is to include a very light base (near white) and a very dark base (near black). These extremes provide high contrast against virtually any chromatic color.
Beyond Text: UI Contrast
WCAG 2.1 also requires 3:1 contrast for UI components, including borders, icons, form controls, and focus indicators. This is often overlooked. That subtle light-gray border on your input field? If it is #e5e5e5 on white, the ratio is only 1.3:1. Users who rely on visible boundaries simply cannot see them.