Ошибка контраста: Ошибка контраста это

контрасты могут применяться только к факторам с 2 или более уровнями

---

Одна распространенная ошибка, с которой вы можете столкнуться в R:

Error in `contrasts<-`(`\*tmp\*`, value = contr.funs[1 + isOF[nn]]) : 
 contrasts can be applied only to factors with 2 or more levels

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

В этом руководстве представлены точные шаги, которые вы можете использовать для устранения этой ошибки.

Пример: как исправить «контрасты могут применяться только к факторам с 2 или более уровнями»

Предположим, у нас есть следующий фрейм данных в R:

#create data frame
df <- data.frame(var1=c(1, 3, 3, 4, 5),
 var2=as. factor (4),
 var3=c(7, 7, 8, 3, 2),
 var4=c(1, 1, 2, 8, 9))
#view data frame
df
 var1 var2 var3 var4
1 1 4 7 1
2 3 4 7 1
3 3 4 8 2
4 4 4 3 8
5 5 4 2 9

Обратите внимание, что предикторная переменная var2 является фактором и имеет только одно уникальное значение.

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

#attempt to fit regression model
model <- lm(var4 ~ var1 + var2 + var3, data=df)
Error in `contrasts<-`(`\*tmp\*`, value = contr.funs[1 + isOF[nn]]) : 
 contrasts can be applied only to factors with 2 or more levels

Мы получаем эту ошибку, потому что var2 имеет только одно уникальное значение: 4. Поскольку в этой предикторной переменной вообще нет никаких изменений, R не может эффективно соответствовать регрессионной модели.

На самом деле мы можем использовать следующий синтаксис для подсчета количества уникальных значений для каждой переменной в нашем фрейме данных:

#count unique values for each variable
sapply( lapply(df, unique), length)
var1 var2 var3 var4 
 4 1 4 4

И мы можем использовать функцию lapply() для отображения каждого из уникальных значений для каждой переменной:

#display unique values for each variable
lapply(df[c('var1', 'var2', 'var3')], unique)
$var1
[1] 1 3 4 5
$var2
[1] 4
Levels: 4
$var3
[1] 7 8 3 2

Мы видим, что var2 — единственная переменная, которая имеет одно уникальное значение. Таким образом, мы можем исправить эту ошибку, просто исключив var2 из регрессионной модели:

#fit regression model without using *var2* as a predictor variable
model <- lm(var4 ~ var1 + var3, data=df)
#view model summary
summary(model)
Call:
lm(formula = var4 ~ var1 + var3, data = df)
Residuals:
 1 2 3 4 5 
 0.02326 -1.23256 0.91860 0.53488 -0.24419 
Coefficients:
 Estimate Std. Error t value Pr(>|t|) 
(Intercept) 8.4070 3.6317 2.315 0.1466 
var1 0.6279 0.6191 1.014 0.4172 
var3 -1.1512 0.3399 -3.387 0.0772 .
---
Signif. codes: 0 ‘\*\*\*’ 0.001 ‘\*\*’ 0.01 ‘\*’ 0.05 ‘.’ 0.1 ‘ ’ 1
Residual standard error: 1.164 on 2 degrees of freedom
Multiple R-squared: 0.9569, Adjusted R-squared: 0.9137 
F-statistic: 22.18 on 2 and 2 DF, p-value: 0.04314

Отбрасывая var2 из регрессионной модели, мы больше не сталкиваемся с ошибкой, которая была раньше.

Дополнительные ресурсы

Как выполнить простую линейную регрессию в R
Как выполнить множественную линейную регрессию в R
Как выполнить логистическую регрессию в R

Мифы о доступности цветового контраста / Хабр

В сегодняшнее время растёт потребность дизайнеров в том, чтобы сделать интерфейсы доступными абсолютно для всех пользователей. Естественно, очень важно приспособить пользователей с ограниченными возможностями к пользованию такими интерфейсами, но в то же время рождается достаточно мифов касательно основ доступности цветового контраста и эти мифы увековечиваются дезинформированными людьми. Они часто повторяют и ретранслируют эти мифы, чтобы дискредитировать дизайн, не понимая, в каких ситуациях применяется тот или иной стандарт цветового контраста. Кроме того, они предполагают, что интерфейс является недоступным, когда для передачи информации используется цветовой контраст.

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

Миф №1. Требования WCAG всегда оптимальны

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

Один из случаев, когда стандарты WCAG неприменимы на практике — это контраст яркости белого текста. Обе кнопки внизу имеют синий фон, но одна имеет белый текст, а другая — черный. Когда вы опрашиваете пользователей, какая кнопка легче читается, большинство скажет вам, что кнопка с белым текстом более читаема (источник). Но коэффициенты контрастности цвета говорят о другом.

Коэффициент контрастности для черного текста составляет 5.41, что соответствует требованию WCAG. Тем не менее, коэффициент контрастности для белого текста составляет 2.94, что не является нормальным показателем. В соответствии с требованиями к контрасту, кнопка с белым текстом должна быть менее читаемой, но является более читаемой.

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

Эта неточность контраста, кажется, происходит с белым текстом на синем и оранжевом фоне. Коэффициенты контрастности WCAG не всегда учитывают контраст высокой яркости белого текста. Белый — это чистая яркость без оттенка или насыщенности, а яркость — самая сильная форма контраста. Поэтому становится понятно, почему кнопку с белым текстом легче читать.

Причина, по которой параметр контрастности не прошёл с белым текстом, состоит в том, что он имеет высокую яркость и находится на фоне с высокой яркостью. Яркий текст на ярком фоне представляется малоконтрастным в вычислительном отношении. Ваш дизайн должен соответствовать тому, что видят люди, а не вычислительные алгоритмы. Вот почему взгляд дизайнера играет немаловажную роль в «финальной формуле».

WCAG — это руководство, помогающее дизайнерам выбрать правильные цветовые контрасты. Здесь применимо знаменитое выражение основателя дисциплины общей семантики Альфреда Коржибски — «Карта не есть территория».

Не стоит путать модель реальности непосредственно с самой реальностью.

Миф №2. Текст должен соответствовать требованиям AAA, в противном случае это недоступный текст

WCAG имеет разные уровни соответствия доступности. Некоторые считают, что весь текст должен соответствовать наивысшему уровню требований (ААА), иначе он будет недоступен для значительной части их пользователей. Это понятие неверно и становится очевидным, когда вы понимаете, как было сформировано требование AAA.

Требование AAA обозначает коэффициент контрастности 7:1 для компенсации потери контрастной чувствительности у пользователей со слабым зрением (при потере зрения 20/80 или более). Многие из этих пользователей используют вспомогательные технологии, которые имеют функции повышения контрастности. Им нужна эта технология, потому что они не просто просматривают контент на одном интерфейсе, а сразу на нескольких. Требование AAA применяется только к пользователям с потерей зрения 20/80, которые не используют вспомогательные технологии, и таких пользователь очень мало (источник).

Потеря зрения 20/80 редко встречается среди населения в целом и в основном затрагивает пожилых людей, страдающих от глазных заболеваний, связанных с возрастом. Исследование показало, что наиболее слабое зрение у человека связано со старением (источник). Если большая часть вашей пользовательской базы старше 70 лет, удовлетворение требований AAA имеет смысл и более того, должно быть обязательно реализовано. Стандарт в 70 лет или старше является таковым, потому что острота зрения начинает снижаться среди пользователей со здоровыми глазами именно в этом возрасте (источник).

Соответствие требованиям AA является достаточным для большинства пользователей. Требование АА составляет коэффициент контрастности 4.5:1, чтобы компенсировать потерю контрастной чувствительности пользователями с потерей зрения 20/40. Исследование показало, что «большинство людей поддерживают, по крайней мере, остроту зрения (20/40 или выше) до 80 лет» (источник). Этот вывод означает, что выполнение требования AA сделает ваш текст доступным для большинства пользователей интерфейса.

Миф №3. Компоненты интерфейса имеют тот же стандарт контрастности, что и текст

Многие допускают ошибку, поддерживая компоненты интерфейса в одинаковом стандарте контрастности, что и текст, при том что их стандарты различны. Компоненты интерфейса имеют контрастность 3:1, а текст — 4.5:1. Текст требует более высокого контраста, потому что пользователи должны прочесть его. Компоненты интерфейса зачастую не требуют чтения текста и имеют более низкий стандарт (источник).

На контрастность текста влияют многие нюансы, например такие как размер шрифта и его жирность. Большие размеры шрифта (18 пт) и текст с большим весом шрифта (14 пт полужирный) требуют более низких коэффициентов контрастности (источник). Кроме того, некоторые компоненты интерфейса могут освобождаться от этого требования. Перед тем, как привязать компонент интерфейса или текст к стандарту отношения контрастности, убедитесь, что вы правильно применяете его.

Миф №4.

Недоступные кнопки и текст серого цвета выглядят как отключенная функциональность

Еще один распространенный миф состоит в том, что серый текст — недоступный текст. Многие считают, что пользователи не могут читать серый текст, потому что он выглядит низко контрастным. Иногда это может быть правдой, но иногда это ложное предположение. Например, кнопка ниже имеет серый текст, при том что некоторые пользователи считают, что она недоступна. Тем не менее, его запуск через средство проверки контрастности показывает, что он не только соответствует стандарту AA, но и значительно превосходит стандарт.

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

Таким образом, серая кнопка, которую большинство считает недоступной, соответствует требованию контрастности.

Этот критерий успеха также означает, что иконки рядом с кнопками не имеют требования к контрасту, если текстовая метка соответствует коэффициенту контрастности 4.5:1. Однако, если иконка не имеет текстовой метки, к значку применяется требование к коэффициенту контрастности 3:1.

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

Миф №5. Дальтоники не могут различить контрастные цвета

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

Например, многие считают, что кнопки ниже недоступны для дальтоника, потому что он использует цветовой контраст для обозначения различных состояний. Но суть состоит в том, что дальтоники могут довольно четко различать контрастные цвета. Кнопки используют только один цветовой оттенок без других конкурирующих и имеют достаточную контрастность.

Используя симулятор дальтонизма, вы можете имитировать восприятие цвета дальтоникам и того, что они видят. Пользователи с дефицитом красно-зеленого цвета и дефицитом сине-желтого цвета без труда видят разницу в цветовом контрасте.

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

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

Существуют различные виды дальтонизма, но те, на которых вы должны сосредоточиться больше всего, — это красно-зеленые. Красно-зеленый дальтонизм поражает более 99% всех дальтоников в мире (источник). Существует несколько симуляторов дальтонизма, которые вы можете использовать для тестирования, например это расширение для Google Chrome — Colorblindly.

Миф №6. Одного лишь цветового сигнала недостаточно для передачи информации

Этот миф, вероятно, является тем самым, в котором дизайнеры заблуждаются чаще всего. Они часто ссылаются на требование «Использование цвета», не понимая, когда применяется этот стандарт. В этих стандартах есть нюансы, которые вы должны понять, прежде чем начать их использовать.

Требование доступности гласит, что «цвет не должен использоваться в качестве единственного визуального средства для передачи информации, обозначения действия или различения элемента». Однако этот стандарт применяется только в тех случаях, когда разным цветам назначаются конкретные значения для информирования пользователя (источник). Другими словами, если вы используете цветовые различия для передачи информации, вам нужен дополнительный сигнал. Но если вы используете контрастность для передачи информации, вам не нужен дополнительный сигнал, если разница в контрасте достаточно высока.

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

Цветовой оттенок для активного состояния — произвольный. Вы можете использовать любой другой цветовой оттенок, и этого будет достаточно, если он поддерживает высокий уровень контрастности по отношению к неактивному состоянию. Таким образом, требование «Использование цвета» не применимо к этому сценарию.

Примером, в котором цвет имеет конкретное назначение, является пример состояния ошибок в полях формы ввода. Красный цвет часто используется для обозначения ошибки в текстовом поле. В этом случае красного недостаточно для обозначения состояния ошибки, потому что дальтоники его не увидят. Красный будет казаться им черным. Следовательно, вам нужен дополнительный сигнал, например, текст или значок, чтобы указать состояние ошибки.

Другой пример — использование цвета для обозначения состояния системы на странице. Цветовые оттенки зеленого и красного часто используются для обозначения серьезности системных сообщений. В этом случае требование «использования цвета» применяется, поскольку для цветовых оттенков есть конкретное назначение. Иконки здесь необходимы, чтобы помочь дальтоникам различать каждое из состояний системы.

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

Именно эта манипуляция контраста с фоном, который создает глубину в кнопках и позволяет пользователям различать активное состояние. Если бы обе кнопки имели одинаковый уровень контрастности, пользователи не могли бы воспринимать глубину как визуальный сигнал.

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

В идеальном мире любой дизайнер хотел бы удовлетворить потребности любого пользователя. Однако это очень идеальная, а значит недостижимая ситуация. Даже если вы примените WCAG в полной мере, всегда найдется пользователь, который посчитает ваш дизайн непростым через призму своего восприятия дизайна через зрение.

Вместо того, чтобы стремиться к идеалу, основанному на недостижимой фантазии, стремитесь к идеалу, основанному на достижимой реальности. Реальность такова, что доступный дизайн не может удовлетворить потребности каждого пользователя, но он может удовлетворить потребности как можно большего числа пользователей.

Понимание этой истины означает признание того факта, что меньшинство пользователей не получит такого же хорошего опыта, как большинство. Но, к счастью для меньшинства, существуют вспомогательные технологии с высококонтрастными режимами. Дизайнеры, которые действительно понимают доступность, будут стремиться к достижению реалистического идеала, а не фантазии.

Нюансы доступности цветового контраста

Доступность всегда должна быть приоритетом при проектировании для пользователей. Рекомендации WCAG являются эффективным инструментом, помогающим вам создать доступный дизайн высочайшего стандарта. Мифы, описанные выше, не вызваны руководящими принципами WCAG. Они вызваны людьми, которые неправильно истолковывают, искажают и неправильно применяют руководящие принципы.

Понимание нюансов доступности цветового контраста поможет вам точно соответствовать стандартам WCAG. Если вдруг другие люди начнут проецировать эти мифы о доступности цветового контраста на ваш дизайн, вы всегда можете поправить их. Вы останетесь верны визуальной простоте и эстетике, одновременно сбалансировав ее с доступностью. А самое главное, что результатом будет содержательный интерфейс, который удовлетворит практически всех его пользователей.

Эффект контраста: что нужно знать HR + примеры

Он прячется у всех на виду, и вы не заметите его эффекта до тех пор, пока это не произойдет. Эффект контраста — это, казалось бы, нормальное мышление в отношении найма, управления эффективностью и развития лидерских качеств. Тем не менее, влияние этой предвзятости может привести к получению некачественных данных и принятию неверных решений. Читайте дальше, чтобы узнать определение эффекта контраста, примеры этого предубеждения и как предотвратить его при наборе персонала для вашей организации.

Что такое контрастный эффект?

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

Эффект контраста — лишь одна из многих вещей, о которых следует помнить в процессе найма, и это может привести к путанице. От систематизации информации о каждом кандидате до того, чтобы помнить об отправке писем с отказом, процесс найма является ошеломляющим. Мы рекомендуем использовать универсальное программное обеспечение для управления персоналом, такое как Eddy, чтобы сделать все это за вас. С Eddy вы можете организовать всех своих кандидатов в конвейер и делать заметки по каждому из них. Другие лица, принимающие решения, могут быть вовлечены в процесс и вносить свой вклад. Запросите демонстрацию Eddy сегодня, чтобы узнать, как мы можем сэкономить вам часы в неделю на каждом найме.

Положительный эффект против отрицательного контраста

Положительный эффект контраста — это когда кандидат оценивается лучше, потому что предыдущие кандидаты были очень слабыми.

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

Примеры эффекта контраста в действии

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

Собеседование с кандидатами

Интервьюер может поставить харизматично говорящему кандидату более высокую оценку, чем предыдущему кандидату, который нервничал просто из-за их разных стилей общения. Может случиться и обратное. После отличного собеседования интервьюер может встретить другого кандидата, который не так хорошо взаимодействует с интервьюером, как предыдущий кандидат. Это приводит к более низкому рейтингу при сравнении кандидатов.

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

Управление эффективностью

Менеджер Джон имеет двух сотрудников, Майка и Адама. У Джона и Адама много общих интересов, и они часто играют в гольф на местном поле для гольфа. Майк не играет в гольф, поэтому его не приглашают пойти с Джоном и Адамом на местное поле для гольфа.

Когда Джон встречается с Майком и Адамом, чтобы обсудить их работу, Майк получает более низкий рейтинг, чем Адам, потому что Джон сравнивает их на основе своего взгляда или мнения о каждом сотруднике, а не на их стандартах производительности.

Возможности для развития

Джилл всегда активно участвует во встречах, задавая вопросы и комментируя. Ее коллега Мэри, тихая, но внимательная, будет слушать встречу и делать заметки, чтобы убедиться, что она помнит информацию с встречи.

Их менеджер помнит Джилл только благодаря ее комментариям на собраниях и предлагает ей дополнительные возможности для обучения и развития. Это ошибка контраста в действии. И Джилл, и Мэри компетентны, но их менеджер сознательно оценил их на основе стиля общения.

Почему HR должен понимать эффект контраста

Этот тип предвзятости выявляет проблему: кто-то всегда оказывается внизу, когда сотрудников сравнивают друг с другом, а не оценивают по стандартам компании. Проблема, как правило, не в работнике, а в стандарте, установленном руководителем. Последствия этой предвзятости включают:

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

Как предотвратить влияние эффекта контраста на процесс найма

Существует несколько способов уменьшить влияние эффекта контраста на процесс найма.

1. Осведомленность

Обучите менеджеров по найму в вашей организации этому предубеждению. Осведомленность всегда является первым шагом к устранению предвзятости в процессе найма. Вы можете использовать предыдущие разделы для создания плана обучения.

2. Просмотрите должностные инструкции

Читая описание должностных обязанностей, заменяйте любые конкурентные слова, такие как «решительный», на «совместный». Цель этого — продемонстрировать позитивную и здоровую рабочую среду, в которой все будут процветать.

3. Проверка резюме вслепую

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

4. Стандартизированные собеседования

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

5. Фактор симпатии

Нас естественным образом тянет к тем, кто похож на нас. Готовясь к собеседованию, спросите себя, насколько важно, чтобы человек, занимающий эту должность, вам нравился. Как только вы определите это, вам будет легче контролировать искажение контраста, оценивая симпатию этого человека. Создайте шкалу Лайкерта в анкете для интервью, чтобы обеспечить объективность оценок и свести к минимуму ваши личные чувства по отношению к человеку.

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

Нанимайте надежных сотрудников быстрее

Найдите более квалифицированных кандидатов, оптимизируйте внутренние процессы найма и улучшите качество работы с кандидатами с помощью Eddy Hire.

Веб-доступность: исправление проблем с контрастностью

Одна из наиболее распространенных проблем с доступностью веб-сайтов/ADA, с которыми мы сталкиваемся, — это контраст: когда между шрифтом и цветом фона недостаточно контраста, у людей с определенными проблемами зрения могут возникнуть проблемы с чтением текста.

Устранение проблемы довольно просто с технической точки зрения, но это может привести к трудным решениям относительно стандартов бренда.

На кого это влияет?

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

Чтобы решить эту проблему, организации, занимающиеся стандартизацией веб-доступности, установили определенные коэффициенты цветовой контрастности, которые должны позволить большинству людей легко использовать веб-сайты, при этом предлагая широкий выбор цветов. Стандарты WCAG 2.0 AA требуют коэффициента контрастности между шрифтом и его фоном 4,5 : 1 для шрифта меньшего размера, в то время как для более крупного шрифта (18 пунктов полужирного и крупнее) может использоваться коэффициент контрастности 3 : 1. (Стандарты WCAG 2.0 AAA еще для соотношений 7 : 1 для мелкого шрифта и 4,5 : 1 для крупного полужирного шрифта. )

Как узнать, есть ли проблема?

Инструмент WAVE от WebAIM неплохо справляется с обнаружением проблем с контрастностью (а также многих других потенциальных проблем с доступностью) — просто введите адрес своего веб-сайта здесь: http://wave.webaim.org/

увидеть ошибки контрастности, нажмите кнопку «Контрастность» сразу под логотипом WAVE и щелкните флажки, чтобы увидеть объяснение. Вы даже можете немного поэкспериментировать, делая цвета темнее или светлее.

Например, на этом белом фоне:

• Тип Этот цвет имеет коэффициент контрастности 2,9 : 1 — слишком низкий.
• Шрифт этого цвета имеет коэффициент контрастности 3,55 : 1 — подходит для крупного полужирного шрифта, но не для мелкого.
• Тип этого цвета имеет коэффициент контрастности 4,76:1 — подходит для шрифта любого размера.

Как это исправить?

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

Если вы использовали локальный HTML или встроенный CSS для стилизации текста, вам необходимо удалить его (лучше полагаться на глобальный стиль вашего сайта и избегать использования локального стиля) или изменить цвета везде, где они появляются.

А как насчет всех наших классных заводных пастельных цветов? Мы очень много работали…

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

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

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

Нам нужен немного более темный оранжевый и более светлый зеленый. Как мы можем начать выяснять это?

Есть несколько отличных онлайн-инструментов, которые позволяют экспериментировать с цветами и находить цветовые сочетания.

• http://colorsafe.co/ — введите цветовой код, и этот инструмент генерирует цвета с достаточной контрастностью.
• http://leaverou.github.io/contrast-ratio/ — этот сайт позволяет вам экспериментировать с разными цветами текста и фона и показывает коэффициенты контрастности
• http://www.colorhexa.com/ — введите цветовой код, и этот сайт сгенерирует множество альтернатив, оттенков, оттенков, возможных цветовых схем и даже диаграмм того, как цвет может выглядеть для людей с определенными типами дальтонизм. Это отличный способ поэкспериментировать с веб-цветами.

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

• Автор
• Последние сообщения

Брайан Врингер

Бывший фермер, занимающийся выращиванием арбузов, Брайан Врингер носит несколько шляп для iDiz Incorporated, в том числе менеджера веб-проектов, Wordsmith и Big Idea Guy.