VueCraft NPM

Доступность ​

Доступность (WCAG) ​

relativeLuminance(color) ​

number — 0–1

Относительная светимость по WCAG, по стандартной формуле линеаризации sRGB.

contrastRatio(c1, c2) ​

number — 1–21

Коэффициент контрастности по WCAG между двумя цветами: (светлее + 0.05) / (темнее + 0.05).

wcagLevel(fg, bg) ​

WcagLevel — 'AAA' | 'AA' | 'AA-large' | 'fail'

Классифицирует коэффициент контрастности между текстом и фоном по порогам WCAG (≥7 AAA, ≥4.5 AA, ≥3 AA-large, иначе fail).

bestTextColor(bg) ​

'#000000' | '#ffffff'

Выбирает то из чистого чёрного или чистого белого, у которого выше коэффициент контрастности к bg.

bestContrastColor(bg, candidates) ​

string — кандидат с наивысшим коэффициентом контрастности к bg

Выбирает наиболее читаемый цвет из произвольного списка candidates, не только чёрный/белый.

bestContrastPalette(bg, palettes, opts?) ​

PaletteScore & { paletteIndex: number } — { paletteIndex, palette, minContrastRatio, avgContrastRatio }

Оценивает каждую из palettes (список палитр-кандидатов) по формуле avgContrastRatio × 0.4 + minContrastRatio × 0.6 (с сильным штрафом за самый слабый цвет) и возвращает палитру с наивысшей оценкой. opts.weights задаёт веса по позиции для каждого цвета, используемые при усреднении коэффициентов контрастности палитры — по умолчанию все цвета имеют равный вес.

ts
import { bestContrastPalette } from 'color-value-tools'

const result = bestContrastPalette('#1a1a2e', [
  ['#ffffff', '#f0f0f0', '#cccccc'],
  ['#ffff00', '#ffd700', '#ff8c00'],
])
// → { paletteIndex: 0, palette: [...], minContrastRatio: 10.62, avgContrastRatio: 14.22 }

isReadableOnBackground(text, bg, opts?) ​

{ readable, minContrastRatio, wcagLevel }

Проверяет читаемость на сплошном, полупрозрачном или градиентном фоне. bg принимает обычную строку цвета, спецификацию полупрозрачности или многоточечный градиент — полупрозрачный фон альфа-композитится поверх своего underlay перед вычислением контраста, а градиент оценивается в каждой точке, используется худший (наименьший) коэффициент. Возвращаемый wcagLevel всегда вычисляется от того же эффективного цвета фона (скомпозированного цвета для полупрозрачной спецификации, худшей точки для градиента), поэтому он никогда не расходится с minContrastRatio/readable. opts: { level?: 'AA' | 'AAA'; largeText?: boolean }, по умолчанию level: 'AA', largeText: false.

ts
import { isReadableOnBackground } from 'color-value-tools'

// Сплошной фон
isReadableOnBackground('#ffffff', '#3498db')
// → { readable: false, minContrastRatio: 3.15, wcagLevel: 'AA-large' }

// Полупрозрачный оверлей поверх белого
isReadableOnBackground('#ffffff', {
  type: 'semi-transparent',
  color: 'rgba(52, 152, 219, 0.5)',
  underlay: '#f0f0f0',
})

// Градиент — для результата используется худшая точка
isReadableOnBackground('#ffffff', {
  type: 'gradient',
  stops: ['#1a1a2e', '#e94560', '#f5a623'],
})

// AAA + крупный текст
isReadableOnBackground('#000000', '#f0f0f0', { level: 'AAA', largeText: true })

isDark(color, threshold?) ​

boolean — true, если relativeLuminance(color) ниже threshold (по умолчанию 0.5)

isLight(color, threshold?) ​

boolean — противоположность isDark, тот же threshold по умолчанию

Симуляция дальтонизма ​

Симулирует восприятие с помощью матриц Vienot 1999, применённых к линеаризованному RGB.

simulateProtanopia(color) ​

string — цвет #rrggbb

Симулирует отсутствие L-колбочек (не различает красный).

simulateDeuteranopia(color) ​

string — цвет #rrggbb

Симулирует отсутствие M-колбочек (не различает зелёный).

simulateTritanopia(color) ​

string — цвет #rrggbb

Симулирует отсутствие S-колбочек (не различает синий).

simulateColorBlindness(color, type) ​

string — цвет #rrggbb

Универсальная точка входа, вызывающая одну из трёх функций выше по type — 'protanopia' | 'deuteranopia' | 'tritanopia'.

ts
import { simulateColorBlindness } from 'color-value-tools'

simulateColorBlindness('#e74c3c', 'deuteranopia') // '#c0c941'
simulateColorBlindness('#3498db', 'protanopia') // '#6e6fcd'