Black on Yellow — Contrast Check

Black text on a yellow background — measured contrast ratio 19.56:1, AAA-grade.

At a glance

Foreground hex
#000000
Background hex
#FFFF00
Contrast ratio
19.56:1
WCAG AA (normal text)
Pass
WCAG AAA (normal text)
Pass

Designers reach for black text on yellow constantly — for headings, links, calls to action, and brand accents. Whether the combination is *accessible* depends on the WCAG contrast ratio, which for this exact pair is 19.56:1. It clears WCAG AAA — the strictest standard. Black on yellow is the most readable hue pairing — used worldwide for hazard signage.

Frequently asked questions

Can I use black text on a yellow background?
If your conformance target is WCAG 2.1 AA (the typical legal and design-system bar), the answer for normal-size body text is yes — at 19.56:1, you are above the 4.5:1 threshold. For large text (18pt or 14pt-bold), the bar is 3:1, which this pair meets. AAA, the strictest tier, requires 7:1 — this pair achieves that.
Why does the named color matter?
CSS named colors map to fixed hex values defined by the CSS Color Module: black is always #000000 and yellow is always #FFFF00. Browsers render them identically, so the contrast ratio is identical too. Always check the hex underneath when you’re testing — gray is not the same as darkgray, which is actually lighter than gray.
What does this fail or pass mean for color blindness?
Contrast ratio measures luminance only — it doesn’t tell you whether color-blind users can distinguish hues. Two colors with strong contrast can still be confused under protanopia or deuteranopia if they sit on the same red-green axis. The simulator above shows how this pair appears under the four common types of color vision deficiency.
How do I improve the ratio if it fails?
It already passes — no fix needed for AA body text. If you also need AAA conformance, the calculator above suggests the nearest passing colors.

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.