Brand on surface
Readable color starts with a measured pair.
#806eae4.22:1AA normal failMeasure WCAG contrast
Turn a foreground and background into one ratio, then test the threshold required by the text that uses them.
Text on surface
Readable color starts with a measured pair.
#1e293b13.98:1AAA normal passThe ratio becomes a threshold decision
The brand pair reaches 4.217159621711113:1: enough for AA large text, not AA normal text. The text pair reaches 13.981703505432394:1.
Measure first, then name the requirement
calculate() returns the ratio. meetsFor() combines the pair with an explicit WCAG level and text-size branch.
<?php
use PhpColor\Color\Color;
use PhpColor\Color\Contrast\ColorContrast;
use PhpColor\Color\Contrast\WcagLevel;
$foreground = Color::parse('#806eae');
$background = Color::parse('#f8fafc');
$ratio = ColorContrast::calculate($foreground, $background);
$passes = ColorContrast::meetsFor(
$foreground,
$background,
WcagLevel::AA,
);
// 4.217159621711113
// falseA color ratio does not inspect the component
The calculation assumes the supplied colors and WCAG 2.x thresholds. It does not inspect font size, weight, antialiasing, gradients, images, interaction states, or DOM rendering.
AA normal4.5:1
AA large3:1
AAA normal7:1
AAA large4.5:1