UX) 텍스트 가독성 Text Legibility

이번에 간단한 시스텝을 ionic + vue로 개발하고 있는데 기획도, 디자인도 제대로 없다. 난감하지만 오히려 내 마음대로 UI/UX를 만들 수 있어서 재미있는 업무인 것 같다. 시간이 좀 촉박하긴 하지만 기존보다 사용성을 좀 더 높이고 예쁘게 만들고 싶다는 욕심이 생겼다. 그래서 UX를 많이 생각하고 공부하고 있다. 기특해

이 글은 이 글을 공부하면서 번역/의역한 글이다. 

---

텍스트 가독성 Text Legibility

색상은 가독성에 큰 영향을 미치는 요소이다. 

가독성 표준 Legibility standards

WCAG standards

모든 텍스트는 읽기 쉽고 접근성 표준에 부합해야 한다. WCAG(The Web Content Accessbility Guidelines 웹 콘텐츠 접근성 가이드라인) level AA는 텍스트와 배경 색상 대비를 일반 텍스트 기준 4.5:1으로, 큰 텍스트 기준 3:1로 요구하고 있다. 

 

텍스트 배경 Text Backgrounds

색상이 들어간 배경 위의 텍스트 

밝은 배경에는 검정색 텍스트를, 어두운 배경에는 하얀색 텍스트를 사용하는 것을 권장한다. 만약 당신의 앱이 라이트와 다크 테마를 모두 가지고 있다면, 각 테마와 대비되는 색상으로 텍스트를 사용할 수 있는지 확인해라.

색상이 들어간 배경이나 타이포그래피는 텍스트의 불투명도 등의 다양한 상태에 대한 규칙을 바꾼다.

 

텍스트 투명도 사용하기 

색상이 들어간 배경 위에 회색 텍스트나 아이콘을 사용하기 대신, 흰색이나 검정색 텍스트의 불투명도를 낮추면 더 좋은 대비를 보여줄 수 있다. 

예를 들어, 초록색 배경에 검정색 텍스트를 75%의 불투명도로 보여주면 텍스트는 초록색이 살짝 보이는 검색으로 보이게 된다. 

다음과 같이 텍스트 색상을 계산할 수 있다:

• 초록색 배경 앞의 불투명도는 낮춘 곳에 검은색을 배치한다.
• 검정색을 배치하여 진해진 초록색 색상의 색상 코드를 알아낸다.
• 텍스트에 해당 색상을 사용한다. 

이 경우, 만약 텍스트 뒤의 표면 색상을 바꾸면 텍스트에 사용한 색상 코드 또한 바꿔야 한다. 

Do

가독성을 유지하기 위해 색상이 있는 표현에 투명한 버전의 검정색을 사용하세요.

Don't

색상이 있는 표현에 불투명한 회색 텍스트를 사용하지 마세요.

 

밝은 배경위의 어두운 텍스트

밝은 배경위의 어두운 텍스트는 다음과 같은 불투명도 레벨을 적용하세요:

• 강한 강조를 해야하는 텍스트: 87%
• 중간 정도의 강조를 하는 텍스트, 힌트 텍스트: 60%
• disabled 처리된 텍스트: 38%

색상이 있는 텍스트와 배경

색상이 있는 텍스트는 주의를 끌고 특정 부분의 강조를 위해 사용되지 않아야 한다. 이상적으로 색상이 있는 텍스트는 헤드라인, 버튼, 링크와 같은 텍스트 요소에 사용해야 한다.

Do - Don't

큰 헤드라인과 짧은 텍스트에 색이 있는 텍스트를 사용하세요.

긴 텍스트에 색이 있는 텍스트를 사용하는 것은 가독성을 떨어뜨립니다.

 

텍스트 유형 Text types

도움말 텍스트 Helper Text

도움말 텍스트는 입력이 어떻게 사용될 것인지와 같은 입력 필드에 대한 컨텍스트를 제공한다. 입력은 브랜드 색상을 사용할 수도 있지만 일단, WCAG 표준에 따라 읽기가 쉬워야 한다. 

예를 들어, 밝은 배경 위의 도움말 텍스트는 다음과 같이 불투명도와 기본 색상 코드를 적용할 수 있다:

• 강한 강조의 도움말: #000000, 87%
• 도움말 기본값: #000000, 60%
• 에러 도움말 기본값: #B00020, 100%

하이라이트된 텍스트 Selected Text

하이라이트된 텍스트를 표현하기 위해 primary, secondary 색상을 사용할 수 있다. 

하이라이트된 색상은 읽기 쉽고, 배경 색상과 대비가 있어야 한다. 또는 윤곽선, 모션, 체크 표시 아이콘 또는 기타 텍스트 처리를 통해 하이라이팅 되었음을 표현할 수 있다. 

아이콘과 심볼 Icons and Other Symbols

아이콘과 어떤 요소들은 WCAG 표준을 충족할 필요는 없다. 하지만 정보를 전달하고 기능을 표시할 수 있을만큼은 잘 보여야 한다. 

예를 들어, 밝은 배경 위에 어두운 아이콘은 다음과 같은 불투명도로 적용한다.