VueCraft NPM

Тема

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

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

ФункцияОписание
relativeLuminance(color)Относительная светимость по WCAG (0–1)
contrastRatio(c1, c2)Коэффициент контрастности по WCAG (1–21)
wcagLevel(fg, bg)Возвращает 'AAA' | 'AA' | 'AA-large' | 'fail'
bestTextColor(bg)Возвращает '#000000' или '#ffffff' для наилучшего контраста на bg
bestContrastColor(bg, candidates)Выбирает наиболее читаемый цвет из массива кандидатов
bestContrastPalette(bg, palettes, opts?)Выбирает палитру с наилучшим общим контрастом. Возвращает { paletteIndex, palette, minContrastRatio, avgContrastRatio }
isReadableOnBackground(text, bg, opts?)Проверяет читаемость на сплошном, полупрозрачном или градиентном фоне. Возвращает { readable, minContrastRatio, wcagLevel }
isDark(color, threshold?)true, если светимость ниже порога (по умолчанию 0.5)
isLight(color, threshold?)Противоположность isDark

isReadableOnBackground — сложные фоны ​

background может быть обычной строкой цвета, спецификацией полупрозрачности или градиентом с несколькими точками:

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

// Сплошной фон
isReadableOnBackground('#ffffff', '#3498db')
// → { readable: true, minContrastRatio: 3.05, 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 })

bestContrastPalette — выбор доступной палитры ​

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

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

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

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

ФункцияОписание
simulateProtanopia(color)Нет L-колбочек (не различает красный)
simulateDeuteranopia(color)Нет M-колбочек (не различает зелёный)
simulateTritanopia(color)Нет S-колбочек (не различает синий)
simulateColorBlindness(color, type)Универсальная — type: 'protanopia' | 'deuteranopia' | 'tritanopia'
ts
import { simulateColorBlindness } from 'color-value-tools'

simulateColorBlindness('#e74c3c', 'deuteranopia') // '#9a7b00'
simulateColorBlindness('#3498db', 'protanopia') // '#5282db'