2023-06-30 10:04:32 +02:00
<!DOCTYPE html>
2024-10-10 14:22:20 +02:00
<!-- Generated by pkgdown: do not edit by hand --> < html lang = "en" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < meta charset = "utf-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" > < title > Contrast Text Color — contrast_text • stRoke< / title > <!-- favicons --> < link rel = "icon" type = "image/png" sizes = "16x16" href = "../favicon-16x16.png" > < link rel = "icon" type = "image/png" sizes = "32x32" href = "../favicon-32x32.png" > < link rel = "apple-touch-icon" type = "image/png" sizes = "180x180" href = "../apple-touch-icon.png" > < link rel = "apple-touch-icon" type = "image/png" sizes = "120x120" href = "../apple-touch-icon-120x120.png" > < link rel = "apple-touch-icon" type = "image/png" sizes = "76x76" href = "../apple-touch-icon-76x76.png" > < link rel = "apple-touch-icon" type = "image/png" sizes = "60x60" href = "../apple-touch-icon-60x60.png" > < script src = "../deps/jquery-3.6.0/jquery-3.6.0.min.js" > < / script > < meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" > < link href = "../deps/bootstrap-5.3.1/bootstrap.min.css" rel = "stylesheet" > < script src = "../deps/bootstrap-5.3.1/bootstrap.bundle.min.js" > < / script > < link href = "../deps/font-awesome-6.4.2/css/all.min.css" rel = "stylesheet" > < link href = "../deps/font-awesome-6.4.2/css/v4-shims.min.css" rel = "stylesheet" > < script src = "../deps/headroom-0.11.0/headroom.min.js" > < / script > < script src = "../deps/headroom-0.11.0/jQuery.headroom.min.js" > < / script > < script src = "../deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js" > < / script > < script src = "../deps/clipboard.js-2.0.11/clipboard.min.js" > < / script > < script src = "../deps/search-1.0.0/autocomplete.jquery.min.js" > < / script > < script src = "../deps/search-1.0.0/fuse.min.js" > < / script > < script src = "../deps/search-1.0.0/mark.min.js" > < / script > <!-- pkgdown --> < script src = "../pkgdown.js" > < / script > < meta property = "og:title" content = "Contrast Text Color — contrast_text" > < meta name = "description" content = "Calculates the best contrast text color for a given
background color.">< meta property = "og:description" content = "Calculates the best contrast text color for a given
background color.">< meta property = "og:image" content = "https://agdamsbo.github.io/stRoke/logo.png" > < / head > < body >
2023-06-30 10:04:32 +02:00
< a href = "#main" class = "visually-hidden-focusable" > Skip to contents< / a >
2024-10-10 14:22:20 +02:00
< nav class = "navbar navbar-expand-lg fixed-top bg-light" data-bs-theme = "light" aria-label = "Site navigation" > < div class = "container" >
2023-06-30 10:04:32 +02:00
< a class = "navbar-brand me-2" href = "../index.html" > stRoke< / a >
2024-10-10 14:22:20 +02:00
< small class = "nav-text text-muted me-auto" data-bs-toggle = "tooltip" data-bs-placement = "bottom" title = "" > 24.10.1< / small >
2023-06-30 10:04:32 +02:00
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbar" aria-controls = "navbar" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div id = "navbar" class = "collapse navbar-collapse ms-3" >
2024-10-10 14:22:20 +02:00
< ul class = "navbar-nav me-auto" > < li class = "active nav-item" > < a class = "nav-link" href = "../reference/index.html" > Reference< / a > < / li >
2023-06-30 10:04:32 +02:00
< li class = "nav-item dropdown" >
2024-10-10 14:22:20 +02:00
< button class = "nav-link dropdown-toggle" type = "button" id = "dropdown-articles" data-bs-toggle = "dropdown" aria-expanded = "false" aria-haspopup = "true" > Articles< / button >
< ul class = "dropdown-menu" aria-labelledby = "dropdown-articles" > < li > < a class = "dropdown-item" href = "../articles/toolbox.html" > Toolbox< / a > < / li >
< / ul > < / li >
< li class = "nav-item" > < a class = "nav-link" href = "../news/index.html" > Changelog< / a > < / li >
< / ul > < ul class = "navbar-nav" > < li class = "nav-item" > < form class = "form-inline" role = "search" >
< input class = "form-control" type = "search" name = "search-input" id = "search-input" autocomplete = "off" aria-label = "Search site" placeholder = "Search for" data-search-index = "../search.json" > < / form > < / li >
< li class = "nav-item" > < a class = "external-link nav-link" href = "https://github.com/agdamsbo/stRoke/" aria-label = "GitHub" > < span class = "fa fab fa-github fa-lg" > < / span > < / a > < / li >
2023-06-30 10:04:32 +02:00
< / ul > < / div >
2024-10-10 14:22:20 +02:00
2023-06-30 10:04:32 +02:00
< / div >
< / nav > < div class = "container template-reference-topic" >
< div class = "row" >
< main id = "main" class = "col-md-9" > < div class = "page-header" >
< img src = "../logo.png" class = "logo" alt = "" > < h1 > Contrast Text Color< / h1 >
2024-10-10 14:22:20 +02:00
< small class = "dont-index" > Source: < a href = "https://github.com/agdamsbo/stRoke/blob/main/R/contrast_text.R" class = "external-link" > < code > R/contrast_text.R< / code > < / a > < / small >
2023-06-30 10:04:32 +02:00
< div class = "d-none name" > < code > contrast_text.Rd< / code > < / div >
< / div >
< div class = "ref-description section level2" >
< p > Calculates the best contrast text color for a given
background color.< / p >
< / div >
< div class = "section level2" >
< h2 id = "ref-usage" > Usage< a class = "anchor" aria-label = "anchor" href = "#ref-usage" > < / a > < / h2 >
< div class = "sourceCode" > < pre class = "sourceCode r" > < code > < span > < span class = "fu" > contrast_text< / span > < span class = "op" > (< / span > < / span >
< span > < span class = "va" > background< / span > ,< / span >
< span > light_text < span class = "op" > =< / span > < span class = "st" > "white"< / span > ,< / span >
< span > dark_text < span class = "op" > =< / span > < span class = "st" > "black"< / span > ,< / span >
< span > threshold < span class = "op" > =< / span > < span class = "fl" > 0.5< / span > ,< / span >
< span > method < span class = "op" > =< / span > < span class = "st" > "perceived_2"< / span > ,< / span >
< span > < span class = "va" > ...< / span > < / span >
< span > < span class = "op" > )< / span > < / span > < / code > < / pre > < / div >
< / div >
< div class = "section level2" >
< h2 id = "arguments" > Arguments< a class = "anchor" aria-label = "anchor" href = "#arguments" > < / a > < / h2 >
2024-10-10 14:22:20 +02:00
< dl > < dt id = "arg-background" > background< a class = "anchor" aria-label = "anchor" href = "#arg-background" > < / a > < / dt >
2023-06-30 10:04:32 +02:00
< dd > < p > A hex/named color value that represents the background.< / p > < / dd >
2024-10-10 14:22:20 +02:00
< dt id = "arg-light-text" > light_text< a class = "anchor" aria-label = "anchor" href = "#arg-light-text" > < / a > < / dt >
2023-06-30 10:04:32 +02:00
< dd > < p > A hex/named color value that represents the light text
color.< / p > < / dd >
2024-10-10 14:22:20 +02:00
< dt id = "arg-dark-text" > dark_text< a class = "anchor" aria-label = "anchor" href = "#arg-dark-text" > < / a > < / dt >
2023-06-30 10:04:32 +02:00
< dd > < p > A hex/named color value that represents the dark text color.< / p > < / dd >
2024-10-10 14:22:20 +02:00
< dt id = "arg-threshold" > threshold< a class = "anchor" aria-label = "anchor" href = "#arg-threshold" > < / a > < / dt >
2023-06-30 10:04:32 +02:00
< dd > < p > A numeric value between 0 and 1 that is used to determine
the luminance threshold of the background color for text color.< / p > < / dd >
2024-10-10 14:22:20 +02:00
< dt id = "arg-method" > method< a class = "anchor" aria-label = "anchor" href = "#arg-method" > < / a > < / dt >
2023-06-30 10:04:32 +02:00
< dd > < p > A character string that specifies the method for calculating
the luminance. Three different methods are available:
c("relative","perceived","perceived_2")< / p > < / dd >
2024-10-10 14:22:20 +02:00
< dt id = "arg--" > ...< a class = "anchor" aria-label = "anchor" href = "#arg--" > < / a > < / dt >
2023-06-30 10:04:32 +02:00
< dd > < p > parameter overflow. Ignored.< / p > < / dd >
< / dl > < / div >
< div class = "section level2" >
< h2 id = "value" > Value< a class = "anchor" aria-label = "anchor" href = "#value" > < / a > < / h2 >
2024-10-10 14:22:20 +02:00
< p > A character string that contains the best contrast text color.< / p >
2023-06-30 10:04:32 +02:00
< / div >
< div class = "section level2" >
< h2 id = "details" > Details< a class = "anchor" aria-label = "anchor" href = "#details" > < / a > < / h2 >
< p > This function aids in deciding the font color to print on a given background.
The function is based on the example provided by teppo:
https://stackoverflow.com/a/66669838/21019325.
The different methods provided are based on the methods outlined in the
StackOverflow thread:
https://stackoverflow.com/questions/596216/formula-to-determine-perceived-brightness-of-rgb-color< / p >
< / div >
< div class = "section level2" >
< h2 id = "ref-examples" > Examples< a class = "anchor" aria-label = "anchor" href = "#ref-examples" > < / a > < / h2 >
< div class = "sourceCode" > < pre class = "sourceCode r" > < code > < span class = "r-in" > < span > < span class = "fu" > contrast_text< / span > < span class = "op" > (< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/c.html" class = "external-link" > c< / a > < / span > < span class = "op" > (< / span > < span class = "st" > "#F2F2F2"< / span > , < span class = "st" > "blue"< / span > < span class = "op" > )< / span > < span class = "op" > )< / span > < / span > < / span >
< span class = "r-out co" > < span class = "r-pr" > #> < / span > [1] "black" "white"< / span >
< span class = "r-in" > < span > < / span > < / span >
< span class = "r-in" > < span > < span class = "fu" > contrast_text< / span > < span class = "op" > (< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/c.html" class = "external-link" > c< / a > < / span > < span class = "op" > (< / span > < span class = "st" > "#F2F2F2"< / span > , < span class = "st" > "blue"< / span > < span class = "op" > )< / span > , method< span class = "op" > =< / span > < span class = "st" > "relative"< / span > < span class = "op" > )< / span > < / span > < / span >
< span class = "r-out co" > < span class = "r-pr" > #> < / span > [1] "black" "white"< / span >
< / code > < / pre > < / div >
< / div >
2024-10-10 14:22:20 +02:00
< / main > < aside class = "col-md-3" > < nav id = "toc" aria-label = "Table of contents" > < h2 > On this page< / h2 >
2023-06-30 10:04:32 +02:00
< / nav > < / aside > < / div >
< footer > < div class = "pkgdown-footer-left" >
2024-10-10 14:22:20 +02:00
< p > Developed by Andreas Gammelgaard Damsbo.< / p >
2023-06-30 10:04:32 +02:00
< / div >
< div class = "pkgdown-footer-right" >
2024-10-10 14:22:20 +02:00
< p > Site built with < a href = "https://pkgdown.r-lib.org/" class = "external-link" > pkgdown< / a > 2.1.1.< / p >
2023-06-30 10:04:32 +02:00
< / div >
< / footer > < / div >
2024-10-10 14:22:20 +02:00
2023-06-30 10:04:32 +02:00
< / body > < / html >
