Checking Color Contrast

The Check view is the core of Vesper Colors. It shows your foreground and background colors side by side, calculates the contrast ratio between them, and tells you whether they pass or fail each WCAG 2.2 threshold.

Entering a color

Tap or click either the foreground or background swatch to open the color picker for that color. You can:

• Drag the picker crosshair to select a hue and saturation
• Drag the hue slider to change the base hue
• Tap a shade from the quick-select row
• Type a hex value directly into the hex input field

Tap Done to apply the color. Tap Cancel to discard your changes and return to the previous color. On iOS, if you made changes and tap Cancel, a confirmation prompt will ask you to confirm before discarding.

Swapping colors

Tap the swap button (the double-arrow icon between the two swatches) to swap the foreground and background colors. The contrast ratio stays the same - swapping colors does not change the ratio - but it reverses which color is used as text and which is used as the background in all previews.

Reading the contrast ratio

The large number in the middle of the Check view is the contrast ratio, displayed in the format X.XX:1. A higher ratio means more contrast. The minimum ratios required by WCAG 2.2 are:

• 3:1 - minimum for large text (AA Large) and UI components
• 4.5:1 - minimum for normal text (AA Normal)
• 4.5:1 - minimum for large text at the enhanced level (AAA Large)
• 7:1 - minimum for normal text at the enhanced level (AAA Normal)

See WCAG 2.2 Thresholds for the full breakdown.

The four WCAG badges

Vesper Colors shows four badges, one for each WCAG 2.2 contrast check:

• AA Normal - applies to body text, labels, and interface copy at normal size (below 18pt regular or 14pt bold)
• AAA Normal - the enhanced standard for normal text, required for some accessibility certifications and best practice for body copy
• AA Large - applies to large text (18pt and above regular, or 14pt and above bold) and to UI components like buttons, form borders, and icons
• AAA Large - the enhanced standard for large text

Each badge shows PASS in green or FAIL in red. A pair can pass some checks and fail others - for example, a moderate contrast pair might pass AA Large but fail AA Normal.

Text preview

Below the color swatches, a text preview card renders sample text in your chosen colors. It shows two examples:

• Large text (above 18pt) - "The quick brown fox" in bold
• Normal text (18pt and below) - "The quick brown fox jumps over the lazy dog"

This gives you an immediate visual sense of readability before looking at the numbers.

Starter pairings

Ten pre-built color pairs are available at the bottom of the Check view: Midnight, Ocean, Forest, Ember, Orchid, Slate, Gold, Rose, Storm, and Sage. Tap any chip to load that pair instantly. The active pairing is highlighted with a violet border.

These pairings are a good starting point for exploring how contrast works across different color combinations. All ten are accessible at AA Normal level.