Light

Surface
Text
Control

Dark

Surface
Text
Control

Aim for sufficient color contrast in all appearances

Using system-defined colors can help you achieve a good contrast ratio between your foreground and background content. At a minimum, make sure the contrast ratio between colors is no lower than 4.5:1. For custom foreground and background colors, strive for a contrast ratio of 7:1, especially in small text. This ratio ensures that your foreground content stands out from the background, and helps your content meet recommended accessibility guidelines.

If a website or an application sees frequent use, it should consider providing this option to its users

require "calyx"
class Person
  attr_accessor :name

  def initialize(name)
    @name = name
  end
end
    
Node Label
Outgoing 1
Outgoing 2

Aim for sufficient color contrast in all appearances

Using system-defined colors can help you achieve a good contrast ratio between your foreground and background content. At a minimum, make sure the contrast ratio between colors is no lower than 4.5:1. For custom foreground and background colors, strive for a contrast ratio of 7:1, especially in small text. This ratio ensures that your foreground content stands out from the background, and helps your content meet recommended accessibility guidelines.

If a website or an application sees frequent use, it should consider providing this option to its users

require "calyx"
class Person
  attr_accessor :name

  def initialize(name)
    @name = name
  end
end
    
Node Label
Outgoing 1
Outgoing 2