Контраст и выравнивание — Примеры

Пример 1 — Подсказка, которая проходит только на бумаге

Текст подсказки в форме нарисован #8A8A8A на белом. Проверяющий говорит, что это нормально, но на улице она пропадает, поэтому проверьте пару и назовите замену, которая проходит, с указанием, насколько.

Подпись поля  #333333 на #FFFFFF
Подсказка     #8A8A8A на #FFFFFF   «Без пробелов, не меньше 12 символов»

Решение

Подсказка  #595959 на #FFFFFF   коэффициент ≈ 7.0:1   проходит
Было       #8A8A8A на #FFFFFF   коэффициент ≈ 3.45:1  не проходит
Подпись    #333333 на #FFFFFF   коэффициент ≈ 12.6:1

Против минимума 4.5:1 для обычного текста замена превышает его больше чем на два, однако исходный вариант остаётся ниже: вот разница между различием и украшением. Ловушка же в том, чтобы доверять экрану: #8A8A8A в светлой комнате выглядит достаточно серым, поэтому проверяйте коэффициент, а не глаз.

Пример 2 — Колонка чисел, которая не сходится

Блок итогов выравнивает по центру и заголовок, и суммы, поэтому цифры съезжают, а читатель сравнивает их вручную. Выровняйте его по одному левому краю и по правому краю чисел.

       Итого по счёту
         1,204.00
            86.50
        12,000.00

Решение

Итого по счёту
     1,204.00
        86.50
    12,000.00

Заголовок стоит на левом краю вместе с колонкой сумм, а цифры делят правый край, поэтому десятичные точки выстраиваются и сравнение мгновенно. Числа по центру выглядят аккуратно построчно и рвано в колонке — отсюда правило: по центру ставьте только то, у чего нет естественного края, а всё числовое выравнивайте по правому краю.