Reading Illustration Color Schemes by the Numbers: Area Share, Color Difference, Contrast Ratio

Reading dominant and accent colors by area balance

Extract representative colors and each card shows an "area share" — the fraction of pixels considered for extraction that this color covers (narrow the range and the remaining pixel count becomes the denominator). A large share is a dominant tone; a few percent is an accent.

• If a color you intended as an accent has an area share close to a dominant tone's, it isn't functioning as an accent. Shrink its area, or push its saturation or lightness further from the dominant color.
• Raising the color count can split one dominant color into several near-duplicates, lowering each area share. Raising "Merge strength" folds similar colors back together so the ratio adds up correctly again.
• Narrowing the extraction range to a family such as skin tones changes area share into a ratio within that family rather than the whole image — useful for seeing what ratio of area base, shadow, and blush tones occupy within skin.

Finding colors that sit too close together with color difference (OKLab)

How close two colors look is judged by their Euclidean distance in OKLab, a perceptually uniform color space — the color difference. Raw RGB differences drift from perceived closeness in shadows and highlights, but OKLab distance stays roughly proportional to how close colors look at any lightness. As a rule of thumb, 0.02 is where colors "only look different side by side," and 0.10 is where they read as clearly separate. Each card shows its "nearest color difference," and dropping below 0.02 triggers a "too close" flag.

• If the two flagged colors play different roles — a base tone and its shadow, say — push one further in lightness or saturation. If the closeness was deliberate, ignore the flag.
• The skin-tone range is a useful reference for how far is far enough: the difference between the palest, highlight-leaning skin (around #FFE4D1) and the deepest shadow skin (around #8D5A3C) is 0.42, the upper end of "still the same family, just lighter or darker." Around 0.1 is roughly where colors read as distinct.
• Merge strength folds near-duplicate colors together using this distance as its threshold, shown as a number on screen so you can check how aggressively it merged.

Contrast ratio thresholds: 4.5:1 and 3:1 come from WCAG

Each card's "contrast ratio (white / black)" compares that color against a white (#FFFFFF) and a black (#000000) background. It comes from WCAG (Web Content Accessibility Guidelines) relative luminance as (lighter luminance + 0.05) ÷ (darker luminance + 0.05), a value from 1 (identical brightness) to 21 (white on black). The 4.5:1 and 3:1 thresholds aren't specific to this tool — they come from WCAG's own contrast criteria.

4.5:1 or higher

The minimum contrast WCAG requires for normal-size text. A line art or small-text color that clears this threshold should stay legible on either a white or black background.

3:1 or higher

WCAG's threshold for large text and "non-text elements that carry meaning," such as icon or shape outlines. A thick line or large fill is generally fine here even without reaching 4.5:1.

Choosing between the white and black readings

The tool reports values against pure white and pure black, not your actual background. Read "contrast ratio (white)" for colors on white paper, "contrast ratio (black)" for colors on a dark background.

Isolating skin tones to sort out shadow colors

Setting "Extraction range" to skin tones narrows the pixels sent to clustering to a skin-colored window in OKLCh — hue 30°-85°, saturation 0.025-0.13, lightness 0.3-0.97. Vivid oranges, yellows, and extremely dark or light pixels fall outside and get excluded, so the color count you choose is spent entirely on gradations within skin.

1. Load the image and set "Extraction range" to skin tones. Starting with 4-6 colors tends to capture the main base, shadow, and blush tones.
2. Sort by lightness and read each card's lightness and area share top down. The gap from the brightest highlight to the darkest shadow is that character's full range of skin tonal steps.
3. Check saturation alongside contrast ratio for a muddy shadow. If saturation drops sharply only in the shadow, that region alone can end up reading as desaturated and out of place.
4. If no colors come out at all, that skin tone falls outside the window. Switch to "Custom color range," set a pixel of that skin as reference, and widen the tolerance.

Studying another illustration's color scheme numerically

1. Load the frame you want to study and set a higher color count (8-12) to pull out a rough skeleton of its color scheme.
2. Sort colors by area share into dominant, secondary, and accent roles, and note each ratio. Accent colors are often just a few percent — that scarcity itself is worth observing.
3. Re-run the extraction narrowed to skin tones or a hue, and compare the color difference and lightness gap between base and shadow against the dominant tones' own gradation. Shadow desaturation tends to be distinctive.
4. The exported CSV lists HEX, area share, nearest color difference, and contrast ratio side by side, so you can compare several frames purely by the numbers.
5. To study the flow from highlight to shadow, load the same image into the gradient map tool too. The extracted colors line up as stops in lightness order, so you can read which way the hue drifts as it darkens.

Common questions