♀

WCAG контраст проверка

Проверяйте несколько пар цветов текста и фона на соответствие стандартам WCAG 2.1 AA и AAA. Живой предпросмотр показывает, как именно будет выглядеть текст при разных размерах и начертаниях.

Инструменты дизайна Работает локально Данные не отправляются
WCAGдоступностькоэффициент контрастностиa11y
Экспорт цветовых пар 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA требуется 4.5:1 для обычного текста, 3:1 для крупного текста (18pt или 14pt полужирного). WCAG AAA Для обычного текста требуется 7:1, для крупного — 4.5:1. Соответствие AA — юридический минимум в большинстве требований доступности.
    

  


  



  

    
Что такое проверка контраста WCAG AA?

    
Проверяйте коэффициенты цветового контраста на соответствие стандартам WCAG AA и AAA. Проверяйте несколько пар цветов текста/фона одновременно. Бесплатно, работает в браузере, данные не отправляются.

  


  

    
Как использовать проверку контраста WCAG

    
    
      
  1. Введите цвет переднего плана (текста) и цвет фона с помощью средств выбора цвета или введите значения HEX.
    2. 
      
  2. Инструмент мгновенно рассчитывает коэффициент контраста между двумя цветами.
    3. 
      
  3. Проверьте результаты прохождения и непрохождения AA и AAA для обычного и крупного текста.
    4. 
      
  4. Настраивайте цвета, пока ваша комбинация не достигнет нужного уровня WCAG.
    5. 
      
  5. Скопируйте значения цветов, прошедшие проверку, для использования в CSS.
    6. 
    

  






  
Похожие инструменты

  

    👁️
симулятор дальтонизма
Смоделируйте протанопию, дейтеранопию и тританопию на любом изображении

    🎨
выбор цвета
Преобразуйте цвета между HEX, RGB, HSL и CMYK

    🎨
генератор палитры
Создавайте комплементарные, аналогичные и триадные цветовые палитры

  






  
    Разберитесь в контрасте WCAG AA
    ▾
  
  

    

      Пример
      

        

          

            Ввод
            Цвет переднего плана #1F2937 на фоне #FFFFFF
          

          

            Результат
            Соответствует WCAG AA для обычного и крупного текста
          

        

      

    

    

      Типичные сценарии использования
      

        
    
          
  • Проверьте цвета текста на соответствие WCAG AA перед запуском
    • 
          
  • Проверяйте регрессии доступности в токенах дизайн-системы
    • 
          
  • Проверяйте контраст заголовков и основного текста отдельно
    • 
          
  • Передавайте соответствующие требованиям цветовые пары командам продукта
    • 
        

      

    

    

      Часто задаваемые вопросы
      

        
В чём разница между AA и AAA?
AA — стандартный уровень соответствия, требуемый большинством нормативов. AAA — повышенный: не требуется для всего контента, но улучшает читаемость.

        
Проверяется ли здесь контраст нетекстовых элементов?
WCAG 1.4.11 требует контраст 3:1 для компонентов интерфейса и графических элементов — эта проверка покрывает это требование.

        
Что делает WCAG контраст проверка - пакетный тест AA/AAA?
WCAG контраст проверка - пакетный тест AA/AAA полностью работает в вашем браузере и помогает выполнить эту задачу без загрузки данных на сервер.

        
WCAG контраст проверка - пакетный тест AA/AAA бесплатен?
Да. Этот инструмент бесплатен и не требует регистрации.