UI color contrast

 the highest contrast 21

: great for punchy headlines, but not always suitable for everything else.


for long-form body copy, titles, and essential items, AAA is the best choice.

: 12-21 for dark body text on light backgrounds 

   7-12 for dark mode - light body text on dark backgrounds.


bright white, long form, body copy on a black background (score of 21) will cause too much eye strain.


minimum score of 4.5 (AA) is perfect for secondary copy.


3.0 (AA Large) is the only score that has a size requirement of 18px bold or 21px regular - the sweet spot for icons & colorful primary CTAs


1 - 1.5 works well for secondary CTA(Call To Action) background colors, borders and dividers, and disabled button text. 


contrast ratio image
contrast ratio




참고


Fail - text 1.5 이하, 하지만 logos, graphical elements, subtle borders, dividers, and disabled buttons는 해당되지 않음(contrast requirements 없음)


AA Large

for 18px bold and 21px regular (and larger) fonts. 


AA

safe to use for all text sizes throughout your designs.


AAA 

recommended for longer form copy that is meant to be read for a significant period of time. 




* 출처 Shift Nudge



댓글 쓰기

다음 이전