웹 품질의 가독성
글꼴과 색상을 적절하게 사용하면 웹사이트를 더 쉽게 읽을 수 있습니다.
색상 대비에 주의하세요
시력이 좋지 않거나 디스플레이 장치가 좋지 않은 분들은 검은색 바탕에 흰색 글씨, 흰색 배경에 검은색 글자가 가장 좋습니다.
흰색 배경에 회색 텍스트(#CCCCCC)
| 흰색 배경에 회색 텍스트(#EEEEEE) |
| 흰색 배경에 회색 텍스트(#CCCCCC) |
| 회색 회색 텍스트 흰색 배경 (#AAAAAA) |
| 흰색 배경에 회색 텍스트 (#888888) |
| 흰색 배경에 회색 텍스트 (#666666) |
| ) |
| 흰색 배경에 회색 텍스트 ( #222222) |
| 흰색 배경에 회색 텍스트(#111111) |
어두운 배경에 회색 텍스트, 대비도 매우 낮음:
| 검은색 배경에 회색 텍스트(#222222 ) |
| 검은색 배경에 회색 텍스트 (#444444) |
| 검은색 배경에 회색 텍스트 (#666666) |
| 검은색 배경에 회색 텍스트 (#888888) |
| 회색 텍스트 켜짐 검정색 배경에 회색 텍스트(#AAAAAA) |
| 검은 배경에 회색 텍스트(#CCCCCC) |
| 검은 배경에 회색 텍스트(#DDDDDD) |
| 검은 배경에 회색 텍스트(#EEEEEE) |
검은색과 빨간색, 검은색과 파란색, 노란색과 녹색 등 특정 조합은 시각적 피로를 유발합니다.
| 빨간색 배경에 검은색 텍스트 |
| 파란색에 검은색 텍스트 background |
| 녹색 배경에 노란색 텍스트 |
이 조합은 나쁘지 않습니다.
| 회색 배경에 검정색 텍스트 |
| 연한 파란색에 검정색 텍스트 |
| 앤틱 화이트에 검정색 텍스트 |
| 짙은 파란색 바탕에 흰색 글씨 |
글자 간격에 주의하세요
시력이 약한 독자의 경우 글자 간격이 가까울수록 읽기에 상당한 어려움을 겪게 됩니다.
글자 간격이 적당한 텍스트가 읽기 쉽습니다.
간격이 작은 텍스트는 읽기 어렵습니다.
줄 간격에 주의하세요
밑줄 간격은 읽기 쉽습니다줄 간격이 좋은 텍스트
읽기 쉽습니다
줄 간격이 작은 텍스트
읽기 어렵습니다
피하세요 멋진 글꼴
이 글꼴은 읽기 쉽습니다....
이 글꼴은 읽기 어렵습니다....
이탤릭체를 자제하세요
일반 글꼴은 읽기 쉽습니다.
기울임꼴 글꼴은 읽기가 쉽지 않습니다.
