Audit results
Black on White — #000000 on #FFFFFF → 21.00:1 ✓ AAA
White on Black — #FFFFFF on #000000 → 21.00:1 ✓ AAA
Vercel Blue on White — #0070F3 on #FFFFFF → 4.55:1 ✓ AA
Vercel Blue on Black — #0070F3 on #000000 → 4.61:1 ✓ AA
Vercel Color Accessibility — WCAG Contrast Audit
Vercel’s primary brand colors audited against WCAG contrast — 4 of 4 pairs pass AA for normal text.
At a glance
- Pairs audited
- 4
- Passing AA (normal text)
- 4 of 4
- AA threshold
- 4.5:1
- AAA threshold
- 7:1
Vercel uses a strict black-and-white minimalist palette with a single saturated blue accent. Maximum contrast by default. This page audits Vercel’s primary brand-color combinations against the WCAG 2.1 AA threshold (4.5:1 for normal-size body text). Results are computed live from the published brand colors and the WCAG luminance formula.
Brand pair audit
Black on White
Body sample text for accessibility check.
#000000 on #FFFFFF
21.00:1AAA
White on Black
Body sample text for accessibility check.
#FFFFFF on #000000
21.00:1AAA
Vercel Blue on White
Body sample text for accessibility check.
#0070F3 on #FFFFFF
4.55:1AA
Vercel Blue on Black
Body sample text for accessibility check.
#0070F3 on #000000
4.61:1AA
What this means in practice
Vercel’s palette is essentially perfect for accessibility — black/white maximizes contrast and the accent blue clears AA in both polarities. A reference design system for accessibility-conscious dev brands.
Frequently asked questions
Does Vercel comply with WCAG?
Brand color tokens are one input to compliance — actual page conformance depends on which pairs are used where. Vercel has 4 of 4 primary pairs passing AA at body size. Some pairs are intended for large text or background usage only.
Where can I check the latest brand guidelines?
Brand guidelines change without notice. Always cross-check against Vercel’s current published brand site or design-system documentation before shipping. The hex values used here reflect publicly documented brand color tokens at the time of writing.
How do I fix failing brand pairs in my own design system?
When a brand color fails AA on white, the standard fix is to introduce a darker variant (often suffixed -700 or -600 in design-system terminology) for use as text on light surfaces, while reserving the lighter brand color for large headings or background usage. The contrast checker above suggests the nearest passing color in either direction.
Related Tools
palette
Color Palette
Extract colors from images or generate harmonious palettes.
blur_on
Color Gradient Test
Test your monitor for color banding and 8-bit vs 10-bit depth with smooth gradients across grayscale, red, green, blue, and hue channels.
gradient
CSS Gradient
Visual CSS background generator & code.
draw
Logo Maker
Design logos with a drag-and-drop canvas editor. Add text, icons, and shapes — export PNG, SVG, or ZIP.
style
CSS Cheatsheet
Quick reference for CSS selectors, Flexbox, Grid, typography, animations, and modern CSS. Search and copy instantly.