Как решить проблему доступности цветового контраста на отключенной кнопке - PullRequest
Новая
       12

Как решить проблему доступности цветового контраста на отключенной кнопке

1 голос
/ 14 апреля 2020

Там кнопка условно отключена, а отключенная кнопка отображается серым цветом.

Цвет фона - #e0e0e0, а цвет текста - #a6a6a6, поэтому коэффициент контрастности составляет 1,84 из требуемых 4,5. Мне было интересно, есть ли способ пропустить проверку контрастности цвета на отключенной кнопке.

У него уже есть свойство aria-disabled.

1 Ответ

1 голос
/ 15 апреля 2020

Краткий ответ

Нет, вы не можете пропустить одно правило и все еще быть AA или AAA-совместимым.

Следуйте инструкциям, это сделает ваше приложение лучше для всех (например, цветовой контраст помогает людям, использующим свой телефон под прямыми солнечными лучами на экране, вызывающими яркий свет, по-прежнему легко видеть, а не только с нарушениями восприятия цветового контраста) .

Длинный ответ

При разработке отключенных кнопок применяются все те же правила цветовой контрастности (таким образом, контрастность 3: 1 с фоном, на котором он находится, минимум 4,5: 1 для текста на фоне кнопки для рейтинга АА, 7: 1 для рейтинга ААА).

Здесь можно сделать несколько вещей.

Увеличьте размер шрифта, если вы можете разместить 19px и полужирный текст. вам нужно только контрастность 3: 1. (#949494 фон кнопки и текст #fff имеют контрастность 3,03: 1, кнопка #949494 и фон страницы #fff имеют такое же соотношение). 

button{
    background-color: #949494; 
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 19px;
    font-weight: bold;
    cursor: not-allowed;
}
<button>disabled</button>

Увеличьте контраст с фоном, добавив темную рамку, используйте темный текст на светло-сером фоне. (#EBEBEB background и #696969 text имеют коэффициент контрастности 4.6: 1, однако #EBEBEB и #fff будут иметь коэффициент контрастности только 1.19: 1, поэтому нам нужно добавить границу, чтобы исправить это, #919191 и #fff имеют контрастность 3,15: 1). 

button{
    background-color: #EBEBEB;
    color: #696969;
    border: 1px solid #919191;
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 16px;
    cursor: not-allowed;
}
<button>disabled</button>

Или go для отключенной кнопки с рейтингом AAA

Я не думаю, что слишком сложно заставить кнопку с рейтингом AAA соответствует вашей теме (не видел вашей темы, поэтому вам придется настроить).

Все, что я сделал со следующим примером из предыдущего примера, - сделал текст темнее. (таким образом, #4D4D4D текст на фоне кнопки #EBEBEB имеет коэффициент контрастности 7,09: 1, поскольку граница уже составляет 3,03: 1, как в предыдущем примере, эта кнопка теперь имеет оценку AAA для цветового контраста) 

button{
    background-color: #EBEBEB;
    color: #4D4D4D;
    border: 1px solid #919191;
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 16px;
    cursor: not-allowed;
}
<button>disabled</button>

Краткое изложение рекомендаций

Если вы используете средство проверки контрастности цвета , вы можете сами поиграть с числами, чтобы сделать что-то подходящее Ваша тема.

Правила: -

Коэффициент контрастности 3: 1 между элементом управления и его окружением. Самый простой способ добиться этого на светлой кнопке - с более темной рамкой (примеры 2 и 3). (Рейтинг AA и AAA)

и выберите одно из следующих правил: -

3: 1 коэффициент контрастности между текстом и фоном кнопки. Однако это должно быть не менее 24px (нормальный вес) или 19px и жирным шрифтом. (Рейтинг АА)

4,5: 1 коэффициент контрастности между текстом и фоном кнопки. Это для текста размером 16 пикселей (минимальный размер шрифта), не должен быть жирным. (Рейтинг АА)

7: 1 коэффициент контрастности между текстом и фоном кнопки. Еще раз для текста 16px. (Рейтинг ААА).

Лично я бы оценил рейтинг ААА go, так как с небольшим переворотом не составит труда сделать красивую кнопку, используя темный текст на сером фоне.

При любых обстоятельствах убедитесь, что у вас есть cursor: not-allowed;, если у вас установлено cursor: pointer. Вы не хотите указывать, что что-то кликабельно, когда оно отключено. Я сделал это во всех трех примерах.

...