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

bestGradientTextColor

Возвращает '#000000' или '#ffffff' — в зависимости от того, что даёт лучший минимальный контраст по всем точкам градиента.

import { bestGradientTextColor } from 'css-magic-gradient'

// Двухцветный градиент (обратная совместимость)
bestGradientTextColor('#1a1a2e', '#e94560')
// → '#ffffff'

// Многоточечный градиент
bestGradientTextColor(['#1a1a2e', '#c0357a', '#e94560'])
// → '#ffffff'

// Детальный результат с оценками по каждому цвету
const detail = bestGradientTextColor(['#1a1a2e', '#e94560'], { detailed: true })
// → { recommended: '#ffffff', black: { contrast: 1.8, wcag: 'fail' }, white: { contrast: 9.3, wcag: 'AAA' } }

gradientContrastRatio

Возвращает минимальный коэффициент контрастности WCAG цвета текста относительно градиента. Выбирает 11 равномерно распределённых точек вдоль градиента.

import { gradientContrastRatio } from 'css-magic-gradient'

// Два цвета (обратная совместимость)
gradientContrastRatio('#ffffff', '#1a1a2e', '#e94560')
// → минимальный коэффициент по всем выбранным точкам

// Массив точек
gradientContrastRatio('#ffffff', ['#1a1a2e', '#c0357a', '#e94560'])

gradientWcagLevel

Возвращает подробный GradientWcagReport с наихудшим уровнем WCAG, минимальным контрастом и позициями, не проходящими порог AA.

import { gradientWcagLevel } from 'css-magic-gradient'

const report = gradientWcagLevel('#ffffff', '#1a1a2e', '#e94560')
// → {
//     level: 'AAA',
//     minContrast: 8.4,
//     problematicStops: []   // позиции (0–1), где контраст < 4.5
//   }

// Градиент со слабой средней точкой:
const report2 = gradientWcagLevel('#ffffff', ['#ffffff', '#aaaaaa', '#3498db'])
// → { level: 'fail', minContrast: 1.07, problematicStops: [0, 0.09, 0.18, …] }

GradientWcagReport

Поле	Тип	Описание
level	WcagLevel	Наихудший уровень WCAG среди всех выбранных точек
minContrast	number	Минимальный коэффициент контрастности вдоль градиента
problematicStops	number[]	Дробные позиции (0–1), где контраст < 4.5

createAccessibleGradient

Автоматически подстраивает точки градиента, пока textColor не достигнет целевого уровня WCAG.

import { createAccessibleGradient } from 'css-magic-gradient'

// По умолчанию: подстраивает светлоту шагами по 5%, пока не достигнут AA
createAccessibleGradient('#3498db', '#ffffff', {
  targetLevel: 'AA',
})

// Подстраивать насыщенность вместо этого
createAccessibleGradient('#3498db', '#ffffff', {
  targetLevel: 'AAA',
  adjustmentStrategy: 'saturation',
})

// Подстраивать и светлоту, и насыщенность
createAccessibleGradient('#c0357a', '#000000', {
  adjustmentStrategy: 'both',
  direction: 'to right',
})

AccessibleGradientOptions

Опция	Тип	По умолчанию	Описание
direction	string	'to bottom'	Ключевое слово CSS-направления
angle	number	—	Угол в градусах
targetLevel	'AAA' | 'AA' | 'AA-large'	'AA'	Минимальный уровень контраста WCAG
adjustmentStrategy	'lightness' | 'saturation' | 'both'	'lightness'	Как подстраиваются точки цвета
interpolation	ColorInterpolation	—	Интерполяция CSS Color Level 4
repeating	boolean	false	Использовать repeating-linear-gradient