단일 단락에서 대비를 고려해야 할 곳 전체

우리는 디자인에서 색상을 선택하려고 할 때 항상 접근성에 대해 생각하고 있습니다. 색상이 닿을 때마다 대비가있을 때마다 텍스트의 색상 대비에 대해 이야기하고 있다면 읽을 수있을 정도로 높아야합니다. 이것은 다양한 시각 장애가있는 사람들에게 도움이되지만 모두가 쉽게 읽을 수있는 텍스트에 감사합니다.

단일 단락의 색상 대비 고려 사항을 살펴 보겠습니다!

단락의 링크는 아마도 다른 색상으로 설정되어 링크로 구별됩니다.

링크와 같은 집중 가능한 요소에는 초점 스타일도 필요합니다. 기본적으로, 우리는 아마도 퍼지 블루 윤곽선을 얻을 수 있으므로 충분한 색상 대비가있는 것을 확인해야합니다. 그리고 우리가 그것을 사용자 정의한다면, 그 사용자 정의에는 좋은 색상 대비도 필요합니다.

마우스 사용자를위한 호버 상태도 필요합니다. 여기에서는 텍스트의 절반 정도를 다루는 배경 효과를 사용하겠습니다. 그런 일을 할 때, 호버에서 눈에 띄게 효과가 강해야하며, 대비는 두 배경에서 모두 작동해야합니다.

매우 일반적이지는 않지만 스타일을 방문 할 수 있습니다 : 방문 링크도 마찬가지입니다. 스타일은 다소 제한적입니다 (예 : 보안 문제이기 때문에 불투명도 나 배경을 변경할 수는 없지만) 색상을 변경할 수 있습니다. 그렇게하면 적절한 대비도 필요합니다. 아마도 우리는 색상으로 색상 차별화를 색상으로 잡아 당길 수있을 것입니다 : 상속; 링크를 다소 강조하지 않지만 여전히 표시합니다.

고려해야 할 또 다른 것은 사람들이 텍스트를 강조하는 것입니다. 내 컴퓨터에서는 기본적으로 주황색으로 강조 표시하도록 설정했습니다 (일반적으로 MacOS의 연한 파란색입니다).

바라건대, 링크 색상이 사용자가 가질 수있는 하이라이트 색상 선택하에 유지되기를 바랍니다. 그들은 매우 가벼운 색조 인 경향이 있습니다.

:: selection {background : purple ; }. 그렇게했다면 충분한 대비를 얻으려면 모든 색상을 다시 확인해야합니다.

색상과 배경을 모두 바꾸어 자신의 손에 조치를 취할 수 있습니다.

그러나 텍스트 내부의 링크는 여기에서 그 대비를 잃어 버렸습니다. 우리는 a :: 선택에 새로운 색상을 설정하여 토끼 구멍을 계속 내려갈 수 있습니다.

나는 당신이 사용자 정의 강조 표시 색상을 수행하고 선택한 텍스트에 대해 특별히 더 이상 사용자 지정하지 않는다면, 좋은 경험 법칙은 매우 가볍게 하는 것이라고 말합니다.

이 게시물에 대한 아이디어는 텍스트를 강조 할 때이 사이트에서 링크를 읽기가 어렵다고보고 한 사람들로부터 얻은 버그 보고서에서 나온 다음 링크에 집중했습니다. 나는 더 정교 해져서 그것을 고치려고 노력했지만 당신이 할 수있는 일에는 한계가 있습니다.

 :: 선택 a : 초점 { / * nope * /}
A : 초점 :: 선택 { / * nope * /}
A :: 선택 : 초점 { / * Nope * /}

더 이상 더 적은 일을함으로써 취급하는 것이 좋습니다.

나는 최근에 Ethan Muller의 Design Systems Post 디자인을 읽었으며 대비에 대해서도 비슷한 점을 지적하지만 상황에 맞지 않고 색 스펙트럼에서 비슷한 점을 만듭니다. 예를 들어, 파란색 링크 색상은 몇 가지 디자인 시스템 색상에서 잘 작동하지만 다른 디자인 시스템에는 잘 작동하지 않을 수 있습니다.

이것에 도움이 될 수있는 몇 가지가 있습니다.

• "배경색을 선언 할 때마다 색상을 선언 할 때마다"의 일반적인 조언이 도움이 될 수 있습니다.
• 나는 조명과 같은 학부모 수준의 클래스를 사용하여 밝은 색의 용기 내부에 광범위하게 물건을 변경했습니다.
• Sass Mixin을 사용하여 링크와 링크 상태를 쉽게 변경할 수 있도록 도와 주었으므로 배경을 변경할 때 더 적합합니다.

 @mixin linkstyletext ($ linkcolor) {
  A {
    // $ linkcolor로 일반 링크 스타일을 업데이트합니다
    & : 호버,
    &:집중하다 {
      // 또한 호버/포커스 스타일을 변경합니다.
    }
  }
}

.variation {
   배경 : $ somenewbgcolor;
   linkstyletext ($ somenewlinkcolor)
}

글쎄,이 여행에와 주셔서 감사합니다. 색상 대비가 배경에서 단일 링크 색상을 확인하여 통과하는 것만 큼 간단하지 않다는 것은 저에게 발생했습니다. 신체 사본에서 색칠하는 수에 따라 점검해야 할 수십 개 이상의 사항이있을 수 있습니다.

이 스크린 샷의 글꼴은 Ibarra Real Nova이며 최근에 Google Fonts에서 출시되었습니다.

위 내용은 단일 단락에서 대비를 고려해야 할 곳 전체의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!