본문 바로가기
반응형

COLOR2

웹 접근성의 명도 대비 확인을 수월하게 해주는 Contrast Grid #1946 https://contrast-grid.eightshapes.com/ 웹 접근성 프로젝트를 진행할 때 지켜야 하는 항목 중에 색상 문제가 있습니다. 저시력자들을 위하여 배경색과 본문 텍스트의 색상을 읽기 쉽도록 가능한 고대비를 사용하는 방식을 나타내는 항목인데요. 판단 기준은 색상에 따라서 AA(4.5), AAA(7)의 기준을 충족시켜야만 통과가 가능합니다. 기본적으로는 4.5:1을 충족하면 문제가 없지만, AAA(7:1)를 충족시키기 위해선 대비가 더 높아지게 됩니다. 이러한 작업을 할 경우 매번 컬러를 찍어가면서 하는 방법이 있을 수 있지만, 해당 서비스를 사용하여 초기부터 컬러 가이드가 잡혀 있다면 해당 색상을 일괄적으로 반영시킨 뒤에 하나의 화면에서 기준에 부합하지 않는 경우에 대하여 .. 2019. 9. 17.
vuetify theme color 설정 Bootstarp도 그렇고, Vuetify도 그렇고 프레임워크들에는 기본적으로 사이트에서 쉽게 적용가능한 컬러테마가 몇가지 지정되어 있습니다. Vuetify는 plugins > vuetify.js 파일에서 그 값을 지정해 둘 수 있습니다. 기본적으로 인스톨을 마친 초기에는 아마도 다음과 같은 형식으로 되어 있을 것이라 생각됩니다. Vuetify 에서 제공하는 방법 이 상태에서 CSS를 경로를 새롭게 지정해주고, theme에서 필요로 하는 컬러값을 셋팅해 주면 사용가능한 상태가 됩니다. 이 방법은 개인적으로 SCSS파일 사용을 전제로 했었기에 택한 방법인 만큼 다른 방법도 있을 것이라 생각됩니다. 이 방법은 js파일에서 색상값만 바꾸면 자동으로 vuetify.scss에 적용되어 있는 기본 컬러값을 덮어씌우.. 2018. 11. 7.
728x90
반응형